HTML CSS : window 尺寸变化时，固定 Div 的边框（框）相互交叉

HTML CSS : Borders (Boxes) of fixed Divs cross each other when window size changes

我想实现以下设计，其中页眉 div 有 class 命名为 header，页脚 div 有 class 命名为 footer 和具有 class 名为 links 的左侧 div 固定在该位置。

名为 link-contents 的右侧 div 是页面中唯一的 scrollable 部分。

我可以实现Fixed Div，但是有一些问题：

  1. 当 window size 更改时，footer 和 links div 会相互折叠。我希望他们适应更改，例如字体大小必须减小以换行所有单词等

  1. 我不明白为什么 header 是固定的？ 您可以尝试多次单击 Add more products 按钮添加产品​​，这样 submit 按钮就会离开视口并出现滚动条。在滚动时你会看到 header div 是固定的。 因为我没用过position:fixed.

但是如果我用的话。它改变了我页面的整个结构。

代码片段（请在查看结果前展开代码片段）：

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>

在 .link 和 .[= 上使用 高度 而不是 最小高度 28=]-内容 div。还要将那些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% - "sum of your footer and header height in px" ).

让我知道这是否有效。

您需要对内容、links 和 link-contents class 样式进行一些更改。 我添加了内容动态高度 height: calc(100vh - 14%); 删除了 position:fixed 并在 link 样式中添加了 overflow: auto;。最重要的是，我在内容中添加了 display: flex;，在 links-content 中添加了 flex-grow: 1;，因此 link-contents 将在剩余的 space.. [=19 中增长=] 

.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>