HTML CSS: границы (рамки) фиксированных элементов Div пересекаются друг с другом при изменении размера окна - PullRequest
Новая
       55

HTML CSS: границы (рамки) фиксированных элементов Div пересекаются друг с другом при изменении размера окна

0 голосов
/ 14 сентября 2018

Я хочу получить следующий дизайн, где div заголовка, имеющий класс с именем header, div нижнего колонтитула, имеющий класс с именем footer, и левосторонний div, имеющий класс с именем links, фиксируются в этой позиции.

Правосторонний элемент с именем link-contents - единственная scrollable часть на странице.

Design I am aiming

Я могу достичь Фиксированных Дивов, но есть некоторые проблемы:

  1. Когда window size изменяется, деление footer & links падает друг на друга. Я ожидаю, что они адаптируют изменение, как размер шрифта должен уменьшиться, чтобы обернуть все слова и т. Д.

Overlap

  1. Я не понимаю, почему header исправлено? Вы можете попробовать добавить товары, нажав кнопку Add more products несколько раз, чтобы кнопка submit вышла из поля просмотра и появилась полоса прокрутки. При прокрутке вы увидите, что header div исправлено. Потому что я не использовал position:fixed.

Но если я его использую. Это меняет всю структуру моей страницы.

КОД SNIPPET ( Пожалуйста, раскройте фрагмент перед тем, как увидеть результаты ): 

function show_op(id,lb){
    var ops = document.getElementsByClassName('option-contents');
    var op = document.getElementById(id);
    for (var i = 0; i < ops.length; i++) {
        ops[i].style.display='none';
    }
    op.style.display='block';
    var labels = document.getElementsByClassName('option-links');
    var label = document.getElementById(lb);
    for (var i = 0; i < labels.length; i++) {
        labels[i].style.backgroundColor="transparent";
    }
    label.style.backgroundColor="#cccccc";
}



var productsByCategory = {
  A: ["Select sub-product", "CNC 1", "CNC 2", "CNC 3", "CNC 4"],
  B: ["Select sub-product", "LASER 1", "LASER 2", "LASER 3", "LASER 4"],
  C: ["Select sub-product", "RUBBER 1", "RUBBER 2", "RUBBER 3", "RUBBER 4", "RUBBER 5"],
  D: ["Select sub-product", "PRECISION 1", "PRECISION 2", "PRECISION 3"]
};

var valuesByCategory = {
  A: ["", "A1", "A2", "A3", "A4"],
  B: ["", "B1", "B2", "B3", "B4"],
  C: ["", "C1", "C2", "C3", "C4", "C5"],
  D: ["", "D1", "D2", "D3"]
};

var mega_clone = document.getElementsByClassName('product')[0].cloneNode(true);

function fill_select(option, target_menu) {
  for (var i = 0; i < productsByCategory[option].length; i++) {
    var op = document.createElement('option');
    op.text = productsByCategory[option][i];
    op.value = valuesByCategory[option][i];
    target_menu.add(op);
  }
}

function empty_select(target_menu) {
  for (var i = target_menu.length - 1; i >= 0; i--) {
    target_menu.remove(i);
  }
}

function setdisabled(obj) {
  obj.setAttribute("disabled", "disabled");
}

function setenabled(obj) {
  obj.removeAttribute("disabled");
}

function dropdown(obj) {
  var selected = obj.value;
  var target = obj.nextElementSibling;

  var quantity_input = target.nextElementSibling;
  var remove_button = quantity_input.nextElementSibling;

  empty_select(target);
  if (selected == "") {
    var op = document.createElement('option');
    op.text = productsByCategory[option][0];
    op.value = valuesByCategory[option][0];
    target_menu.add(op);
    setdisabled(target);
    setdisabled(quantity_input);
    setdisabled(remove_button);
  } else {
    if (selected == "1") {
      fill_select('A', target);
    } else if (selected == "2") {
      fill_select('B', target);
    } else if (selected == "3") {
      fill_select('C', target);
    } else {
      fill_select('D', target);
    }
    setenabled(target);
  }
}

function dropdown2(obj) {
  var quantity_input = obj.nextElementSibling;
  var remove_button = quantity_input.nextElementSibling;
  var add_button = remove_button.nextElementSibling;
  var reset_button = add_button.nextElementSibling;
  var submit_button = reset_button.nextElementSibling;
  setenabled(quantity_input);
  setenabled(add_button);
  setenabled(remove_button);
  setenabled(reset_button);
  setenabled(submit_button);
}

function new_products(obj) {
  var order = document.getElementById("order_now");
  var form = order.firstElementChild;
  var last_product = form.lastElementChild;
  var clone = last_product.cloneNode(true);
  var reset_button = obj.nextElementSibling;
  var submit_button = reset_button.nextElementSibling;

  setdisabled(clone.getElementsByClassName("second_select")[0]);
  setdisabled(clone.getElementsByClassName("s_btn")[0]);
  setdisabled(clone.getElementsByClassName("remove_btn")[0]);
  setenabled(clone.getElementsByClassName("add_btn")[0]);

  obj.parentNode.removeChild(reset_button);
  obj.parentNode.removeChild(submit_button);

  obj.parentNode.removeChild(obj);

  form.appendChild(clone);

}

function reset() {
  var order = document.getElementById("order_now");
  var new_product = document.createElement('div');
  new_product.className = "product";
  order.innerHTML = "";
  order.appendChild(new_product);
  order.lastElementChild.innerHTML = mega_clone.innerHTML;
}

function remove_product(obj) {
  var order = document.getElementById("order_now");
  if (order.childElementCount == "1") {
    reset();
  } else {
    order.removeChild(obj.parentNode);
  }

}
body {
  height: 100vh;
  margin: 0px;
  overflow-y: auto;
  font-family: 'Roboto';
}

.header {
  display: block;
  background-color: white;
  width: 100%;
  height: 8%;
  font-style: "Roboto";
  font-size: 25px;
  border-bottom: 2px solid;
  border-bottom-color: #cccccc;
}

.content {
  position: relative;
  display: block;
  background-color: white;
  height: 86%;
  font-family: 'Roboto';
  z-index: 0;
  /*min-height: 87%;*/
  overflow: auto;
  /*padding-bottom: 6%;*/
}

.footer {
  position: fixed;
  height: 6%;
  width: 100%;
  bottom: 0;
  border: 2px solid;
  border-color: blue;
  box-sizing: border-box;
}

#clear {
  clear: both;
}

.links {
  position: fixed;
  display: block;
  float: left;
  width: 30%;
  line-height: 2;
  min-height: 86%;
  font-size: 30px;
  border-style: solid;
  box-sizing: border-box;
  border-color: black;
}

.link-contents {
  position: relative;
  display: block;
  float: left;
  left: 30%;
  width: 70%;
  border-style: solid;
  box-sizing: border-box;
  border-color: red;
  min-height: 100%;
}

.option-links {
  display: block;
  cursor: pointer;
}

#op1 {
  background-color: #cccccc;
}

select,
button,
input {
  position: relative;
  top: 5em;
  display: block;
  width: 12em;
  height: 2em;
}

button {
  width: 8em;
}

.first_select {
  position: relative;
  float: left;
  left: 10%;
}

.second_select {
  position: relative;
  float: left;
  left: 20%;
}

.s_btn {
  position: relative;
  float: left;
  left: 30%;
}

.remove_btn {
  position: relative;
  float: left;
  left: 40%;
  width: 5em;
}

.add_btn {
  display: block;
  float: left;
  top: 7.7em;
  width: 10em;
  left: -14em;
}

.reset_btn {
  display: block;
  float: left;
  top: 7.7em;
  width: 7em;
  left: -12em;
}

.submit_btn {
  display: block;
  float: left;
  top: 10em;
  width: 7em;
  left: -24em;
}

.option-contents {
  display: none;
}

#order_now {
  display: block;
}

table {
  table-layout: fixed;
  left: 30%;
}
<!DOCTYPE html>
<html>

<head>
  <title>Profile</title>
</head>

<body>

  <div class="header">

  </div>

  <div class="content">
    <div class="links">
      <span class="option-links" id="op1" onclick="show_op('order_now','op1');">Order new</span><br/>
      <span class="option-links" id="op2" onclick="show_op('current_order','op2');">Current Orders</span><br/>
      <span class="option-links" id="op3" onclick="show_op('previous_order','op3');">Previous Orders</span><br/>
      <span class="option-links" id="op4" onclick="show_op('support','op4');">Support</span><br/>
    </div>
    <div class="link-contents">
      <!--  ORDER NOW    -->
      <div class="option-contents" id="order_now">
        <form action="add_order.php" method="POST" enctype="application/x-www-form-urlencoded">
          <div class="product">
            <select class="first_select" name="category[]" onchange="dropdown(this);">
              <option value="0">Select</option>
              <option value="1">CNS</option>
              <option value="2">Laser Cut</option>
              <option value="3">Rubber roller</option>
              <option value="4">Fixture</option>
            </select>

            <select class="second_select" name="product[]" onchange="dropdown2(this);" disabled>
              <option>Select Product first</option>
            </select>
            <!--<button class="s_btn" onclick="check_products();" value="submit" disabled>Submit</button>-->
            <input class="s_btn" name="quantity[]" type="number" min='1' value="1" disabled />
            <button class="remove_btn" id="remove_button" onclick="remove_product(this);" disabled>Remove</button>
            <button class="add_btn" id="add_button" onclick="new_products(this);">Add more products</button>
            <button class="reset_btn" id="reset_button" onclick="reset(this);" disabled>Reset All</button>
            <button class="submit_btn" id="submit_button" type="submit" disabled>Submit</button>
            <div id="clear"></div>
          </div>
        </form>
      </div>

      <!--  ORDER NOW    -->
      <!--   CURRENT ORDER    -->
      <div class="option-contents" id="current_order">
        <?php
					$servername = "localhost";
					$username = "root";
					$password = "";
					$database = "rt";
					$conn = mysqli_connect($servername,$username,$password,$database);
					if (!$conn) {
						echo "<strong>Connection failed </strong>";
					}
					$sql = "SELECT order_id, product_name, quantity,status FROM orders WHERE user_id='A447ED5'";
					$result = $conn->query($sql);
					$num=mysqli_num_rows($result);

				?>
          <table border="0" cellspacing="2" cellpadding="2">
            <tr>
              <th>
                <font face="Arial, Helvetica, sans-serif">Value1</font>
              </th>
              <th>
                <font face="Arial, Helvetica, sans-serif">Value2</font>
              </th>
              <th>
                <font face="Arial, Helvetica, sans-serif">Value3</font>
              </th>
              <th>
                <font face="Arial, Helvetica, sans-serif">Value4</font>
              </th>
            </tr>
            <!-- LOOP -->
            <?php
					while($row = mysqli_fetch_array($result))
					{
						echo "<tr>";
						echo "<td>" . $row['order_id'] . "</td>";
						echo "<td>" . $row['product_name'] . "</td>";
						echo "<td>" . $row['quantity'] . "</td>";
						echo "<td>" . $row['status'] . "</td>";
						echo "</tr>";
					}
				?>
          </table>
      </div>
      <!--   CURRENT ORDER    -->
      <div class="option-contents" id="previous_order">
        op 3
      </div>
      <div class="option-contents" id="support">
        op 4
      </div>
    </div>

    <div id="clear"></div>

  </div>

  <div class="footer">
    A big thank you to all of you.
  </div>



</body>

</html>

Ответы [ 2 ]

0 голосов
/ 14 сентября 2018

Вам необходимо внести пару изменений в ваш контент, ссылки и стиль класса link-content. Я добавил высоту динамического содержимого height: calc(100vh - 14%);, удалил position:fixed и добавил overflow: auto; в стиле ссылок. Самая важная вещь, которую я добавил display: flex; в контенте и flex-grow: 1; в контенте ссылок, чтобы содержание ссылки росло в оставшемся пространстве. 

.content {
  position: relative;
  background-color: white;
  font-family: 'Roboto';
  height:auto;
  z-index: 0;
  overflow: auto;
  display: flex;
  height: calc(100vh - 14%);
}

.footer {
  position: fixed;
  height: 6%;
  width: 100%;
  bottom: 0;
  border: 2px solid;
  border-color: blue;
  box-sizing: border-box;
}

.links {
  display: block;
  width: 30%;
  line-height: 2;
  height:auto;
  font-size: 30px;
  border-style: solid;
  box-sizing: border-box;
  border-color: black;
  left:0;
  overflow: auto;
}

.link-contents {
  position: relative;
  display: block;
  border-style: solid;
  box-sizing: border-box;
  border-color: red;
  min-height: 100%;
  flex-grow: 1;
  overflow: auto;
}


function show_op(id,lb){
    var ops = document.getElementsByClassName('option-contents');
    var op = document.getElementById(id);
    for (var i = 0; i < ops.length; i++) {
        ops[i].style.display='none';
    }
    op.style.display='block';
    var labels = document.getElementsByClassName('option-links');
    var label = document.getElementById(lb);
    for (var i = 0; i < labels.length; i++) {
        labels[i].style.backgroundColor="transparent";
    }
    label.style.backgroundColor="#cccccc";
}



var productsByCategory = {
  A: ["Select sub-product", "CNC 1", "CNC 2", "CNC 3", "CNC 4"],
  B: ["Select sub-product", "LASER 1", "LASER 2", "LASER 3", "LASER 4"],
  C: ["Select sub-product", "RUBBER 1", "RUBBER 2", "RUBBER 3", "RUBBER 4", "RUBBER 5"],
  D: ["Select sub-product", "PRECISION 1", "PRECISION 2", "PRECISION 3"]
};

var valuesByCategory = {
  A: ["", "A1", "A2", "A3", "A4"],
  B: ["", "B1", "B2", "B3", "B4"],
  C: ["", "C1", "C2", "C3", "C4", "C5"],
  D: ["", "D1", "D2", "D3"]
};

var mega_clone = document.getElementsByClassName('product')[0].cloneNode(true);

function fill_select(option, target_menu) {
  for (var i = 0; i < productsByCategory[option].length; i++) {
    var op = document.createElement('option');
    op.text = productsByCategory[option][i];
    op.value = valuesByCategory[option][i];
    target_menu.add(op);
  }
}

function empty_select(target_menu) {
  for (var i = target_menu.length - 1; i >= 0; i--) {
    target_menu.remove(i);
  }
}

function setdisabled(obj) {
  obj.setAttribute("disabled", "disabled");
}

function setenabled(obj) {
  obj.removeAttribute("disabled");
}

function dropdown(obj) {
  var selected = obj.value;
  var target = obj.nextElementSibling;

  var quantity_input = target.nextElementSibling;
  var remove_button = quantity_input.nextElementSibling;

  empty_select(target);
  if (selected == "") {
    var op = document.createElement('option');
    op.text = productsByCategory[option][0];
    op.value = valuesByCategory[option][0];
    target_menu.add(op);
    setdisabled(target);
    setdisabled(quantity_input);
    setdisabled(remove_button);
  } else {
    if (selected == "1") {
      fill_select('A', target);
    } else if (selected == "2") {
      fill_select('B', target);
    } else if (selected == "3") {
      fill_select('C', target);
    } else {
      fill_select('D', target);
    }
    setenabled(target);
  }
}

function dropdown2(obj) {
  var quantity_input = obj.nextElementSibling;
  var remove_button = quantity_input.nextElementSibling;
  var add_button = remove_button.nextElementSibling;
  var reset_button = add_button.nextElementSibling;
  var submit_button = reset_button.nextElementSibling;
  setenabled(quantity_input);
  setenabled(add_button);
  setenabled(remove_button);
  setenabled(reset_button);
  setenabled(submit_button);
}

function new_products(obj) {
  var order = document.getElementById("order_now");
  var form = order.firstElementChild;
  var last_product = form.lastElementChild;
  var clone = last_product.cloneNode(true);
  var reset_button = obj.nextElementSibling;
  var submit_button = reset_button.nextElementSibling;

  setdisabled(clone.getElementsByClassName("second_select")[0]);
  setdisabled(clone.getElementsByClassName("s_btn")[0]);
  setdisabled(clone.getElementsByClassName("remove_btn")[0]);
  setdisabled(clone.getElementsByClassName("add_btn")[0]);

  obj.parentNode.removeChild(reset_button);
  obj.parentNode.removeChild(submit_button);

  obj.parentNode.removeChild(obj);

  form.appendChild(clone);

}

function reset() {
  var order = document.getElementById("order_now");
  var new_product = document.createElement('div');
  new_product.className = "product";
  order.innerHTML = "";
  order.appendChild(new_product);
  order.lastElementChild.innerHTML = mega_clone.innerHTML;
}

function remove_product(obj) {
  var order = document.getElementById("order_now");
  if (order.childElementCount == "1") {
    reset();
  } else {
    order.removeChild(obj.parentNode);
  }

}
body {
  height: 100vh;
  margin: 0px;
  overflow-y: auto;
  font-family: 'Roboto';
}

.header {
  display: block;
  background-color: white;
  width: 100%;
  height: 8%;
  font-style: "Roboto";
  font-size: 25px;
  border-bottom: 2px solid;
  border-bottom-color: #cccccc;
}

.content {
  position: relative;
  background-color: white;
  font-family: 'Roboto';
  height:auto;
  z-index: 0;
  overflow: auto;
  display: flex;
  height: calc(100vh - 14%);
}

.footer {
  position: fixed;
  height: 6%;
  width: 100%;
  bottom: 0;
  border: 2px solid;
  border-color: blue;
  box-sizing: border-box;
}

#clear {
  clear: both;
}

.links {
  display: block;
  width: 30%;
  line-height: 2;
  height:auto;
  font-size: 30px;
  border-style: solid;
  box-sizing: border-box;
  border-color: black;
  left:0;
  overflow: auto;
}

.link-contents {
  position: relative;
  display: block;
  border-style: solid;
  box-sizing: border-box;
  border-color: red;
  min-height: 100%;
  flex-grow: 1;
  overflow: auto;
}

.option-links {
  display: block;
  cursor: pointer;
}

#op1 {
  background-color: #cccccc;
}

select,
button,
input {
  position: relative;
  top: 5em;
  display: block;
  width: 12em;
  height: 2em;
}

button {
  width: 8em;
}

.first_select {
  position: relative;
  float: left;
  left: 10%;
}

.second_select {
  position: relative;
  float: left;
  left: 20%;
}

.s_btn {
  position: relative;
  float: left;
  left: 30%;
}

.remove_btn {
  position: relative;
  float: left;
  left: 40%;
  width: 5em;
}

.add_btn {
  display: block;
  float: left;
  top: 7.7em;
  width: 10em;
  left: -14em;
}

.reset_btn {
  display: block;
  float: left;
  top: 7.7em;
  width: 7em;
  left: -12em;
}

.submit_btn {
  display: block;
  float: left;
  top: 10em;
  width: 7em;
  left: -24em;
}

.option-contents {
  display: none;
}

#order_now {
  display: block;
}

table {
  table-layout: fixed;
  left: 30%;
}
<!DOCTYPE html>
<html>

<head>
  <title>Profile</title>
</head>

<body>

  <div class="header">
    HEADER
  </div>

  <div class="content">
    <div class="links">
      <span class="option-links" id="op1" onclick="show_op('order_now','op1');">Order new</span><br/>
      <span class="option-links" id="op2" onclick="show_op('current_order','op2');">Current Orders</span><br/>
      <span class="option-links" id="op3" onclick="show_op('previous_order','op3');">Previous Orders</span><br/>
      <span class="option-links" id="op4" onclick="show_op('support','op4');">Support</span><br/>
    </div>
    <div class="link-contents">
      <!--  ORDER NOW    -->
      <div class="option-contents" id="order_now">
        <form action="add_order.php" method="POST" enctype="application/x-www-form-urlencoded">
          <div class="product">
            <select class="first_select" name="category[]" onchange="dropdown(this);">
              <option value="0">Select</option>
              <option value="1">CNS</option>
              <option value="2">Laser Cut</option>
              <option value="3">Rubber roller</option>
              <option value="4">Fixture</option>
            </select>

            <select class="second_select" name="product[]" onchange="dropdown2(this);" disabled>
              <option>Select Product first</option>
            </select>
            <!--<button class="s_btn" onclick="check_products();" value="submit" disabled>Submit</button>-->
            <input class="s_btn" name="quantity[]" type="number" min='1' value="1" disabled />
            <button class="remove_btn" id="remove_button" onclick="remove_product(this);" disabled>Remove</button>
            <button class="add_btn" id="add_button" onclick="new_products(this);" disabled>Add more products</button>
            <button class="reset_btn" id="reset_button" onclick="reset(this);" disabled>Reset All</button>
            <button class="submit_btn" id="submit_button" type="submit" disabled>Submit</button>
            <div id="clear"></div>
          </div>
        </form>
      </div>

      <!--  ORDER NOW    -->
      <!--   CURRENT ORDER    -->
      <div class="option-contents" id="current_order">
        <?php
					$servername = "localhost";
					$username = "root";
					$password = "";
					$database = "rt";
					$conn = mysqli_connect($servername,$username,$password,$database);
					if (!$conn) {
						echo "<strong>Connection failed </strong>";
					}
					$sql = "SELECT order_id, product_name, quantity,status FROM orders WHERE user_id='A447ED5'";
					$result = $conn->query($sql);
					$num=mysqli_num_rows($result);

				?>
          <table border="0" cellspacing="2" cellpadding="2">
            <tr>
              <th>
                <font face="Arial, Helvetica, sans-serif">Value1</font>
              </th>
              <th>
                <font face="Arial, Helvetica, sans-serif">Value2</font>
              </th>
              <th>
                <font face="Arial, Helvetica, sans-serif">Value3</font>
              </th>
              <th>
                <font face="Arial, Helvetica, sans-serif">Value4</font>
              </th>
            </tr>
            <!-- LOOP -->
            <?php
					while($row = mysqli_fetch_array($result))
					{
						echo "<tr>";
						echo "<td>" . $row['order_id'] . "</td>";
						echo "<td>" . $row['product_name'] . "</td>";
						echo "<td>" . $row['quantity'] . "</td>";
						echo "<td>" . $row['status'] . "</td>";
						echo "</tr>";
					}
				?>
          </table>
      </div>
      <!--   CURRENT ORDER    -->
      <div class="option-contents" id="previous_order">
        op 3
      </div>
      <div class="option-contents" id="support">
        op 4
      </div>
    </div>

    <div id="clear"></div>

  </div>

  <div class="footer">
    A big thank you to all of you.
  </div>



</body>

</html>
0 голосов
/ 14 сентября 2018

Используйте height вместо min-height в ваших .links и .link-content divs.Также установите переполнение этих div для скрытого, чтобы содержимое не перекрывало нижний колонтитул.

Верхний колонтитул не исправлен, похоже, потому что у вас нет прокрутки на странице, это простов его положении, так как остальные фиксированы.

Также я хотел бы предложить, чтобы вы использовали фиксированную высоту для нижнего и нижнего колонтитула, то, как вы это сделали, не практично, так как высота 8% может быть слишком маленькой на некоторых экранах.Для этого сделайте следующее: 

.header {
  display: block;
  background-color: white;
  width: 100%;
  height: 80px; /* Fixed Height */
  font-style: "Roboto";
  font-size: 25px;
  border-bottom: 2px solid;
  border-bottom-color: #cccccc;
}

.content {

  /* make the content fixed so you wont have to with links & link content divs */
  position: fixed;

  display: block;
  background-color: white;

  /* Calculate the height minus footer and header height */
  height: 100%;
  height: -webkit-calc(100% - 160px);
  height: -moz-calc(100% - 160px);
  height: calc(100% - 160px);

  /* and add margin top to not overlap with the header */
  margin-top:60px;

  font-family: 'Roboto';
  z-index: 0;
  overflow: auto;
}

.footer {
  position: fixed;

  /* Give footer a fixed height as well */
  height: 80px;

  width: 100%;
  bottom: 0;
  border: 2px solid;
  border-color: blue;
  box-sizing: border-box;
}

#clear {
  clear: both;
}

.links {
  position: fixed;
  display: block;
  float: left;
  width: 30%;
  line-height: 2;

  /* Set the height to 100% as it is inside the .contents it will take its height */
  height: 100%;

  font-size: 30px;
  border-style: solid;
  box-sizing: border-box;
  border-color: black;
}

.link-contents {
  position: relative;
  display: block;
  float: left;
  left: 30%;
  width: 70%;
  border-style: solid;
  box-sizing: border-box;
  border-color: red;

  /* Set the height to 100% as it is inside the .contents it will take its height */
  height: 100%;
}

Если вы хотите изменить высоту верхнего и нижнего колонтитула на свой, просто не забудьте обновить высоту: calc (100% - "сумма нижнего колонтитула и верхнего колонтитулавысота в пикселях ").

Дайте мне знать, если это сработало.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...