HTML CSS：当窗口大小改变时，固定 Div 的边框（框）相互交叉

【问题标题】：HTML CSS : Borders (Boxes) of fixed Divs cross each other when window size changesHTML CSS：当窗口大小改变时，固定 Div 的边框（框）相互交叉
【发布时间】：2018-09-15 18:40:30
【问题描述】：

我想实现以下设计，其中标题 div 具有名为 header 的类，页脚 div 具有名为 footer 的类和一个左侧 div 具有名为 links 的类被固定到那里的位置。

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

我可以实现 Fixed Divs 但有一些问题：

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

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

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

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

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>

【问题讨论】：

  • @Bharata 目前不是先生。这是我最后一个学期的大学项目，我感谢你帮助我。这个学期我正在学习Android。我希望回归 HTML 和 CSS，因为我有很多东西要学习和练习。
  • @Bharata 你用推特吗？如果我发布问题，我可以在那里通知您？
  • 不幸的是，我确实使用 twitter，但您可以随时通知我，例如在这里或在我的帖子下，甚至在 chat 中。复制此链接。
  • @Bharata 好的先生。非常感谢您为我们这样的初学者提供服务。

标签： html css border box-sizing


【解决方案1】：

您需要在此处对内容、链接和链接内容类样式进行一些更改。 我添加了动态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>

【讨论】：

  • 先生，我暂时接受了您的解决方案。一个小问题是，在更改窗口大小时，滚动条会添加到links div。字体大小不能适应变化吗？
  • 先生，正如您在问题中看到的那样，我想知道为什么在不使用 position : fixed 的情况下修复了 header div？
  • 实际上并没有固定。页眉高度为页面的8%，页脚高度为页面的6%（总和为14%）。我们已将内容高度设置为 (100vh - 14%)，因此您不会在正文中出现滚动条。如果您将内容高度设置为（100vh - 1% 或任何小于 14），那么您将看到滚动条，并且在滚动时您会发现标题不固定。 :)
  • 字体大小永远不会适应正文的变化。你必须为此编写代码:)
【解决方案2】：

在 .links 和 .link-contents div 上使用 height 而不是 min-height。还将这些 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% - "您的页脚和页脚高度的总和，单位为 px")。

让我知道这是否有效。

【讨论】：

  • 它不工作。你可以在这里看到输出：imgur.com/a/ojgZtRe
  • 在我的代码头是固定的先生。您可以尝试多次单击“添加更多产品”按钮来添加产品，以便提交按钮超出视图端口并出现滚动条。在滚动时，您会看到标题 div 是固定的。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-10-31
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode