0

我想实现以下设计，其中 Header div 具有 class named header， Footer div 具有 class namedfooter和 Left lateral div 具有 class namedlinks固定到那里的位置。

命名的右侧 divlink-contents是页面中唯一的scrollable部分。

我的目标是设计

我能够实现 Fixed Divs 但存在一些问题：

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

重叠

  1. 我不明白为什么header是固定的？您可以尝试Add more products多次单击按钮添加产品​​，以使submit按钮超出视图端口并出现滚动条。在滚动时，您会看到headerdiv 是固定的。 因为我没用过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>

4

2 回答 2

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>

于 2018-09-14T13:48:09.417 回答
0

在.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 为单位" )。

让我知道这是否有效。

于 2018-09-14T13:36:36.260 回答