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

Question

I want to achieve following design where Header div having class named header, Footer div having class named footer and a Left sided div having class named links are fixed to there position.

The Right sided div named link-contents is the only scrollable part in the page.

I am able to achieve Fixed Divs but there are some problems:

When the window size is changed the footer & links div collapse into each other. I expect them to adapt the change like font size must decrease to wrap all words,etc.

I don't understand why the header is fixed? You can try adding products clicking Add more products Button many times so that submit button goes out of view port and scrollbar appears . On scrolling you will see that header div is fixed. Because I haven't used position:fixed.

But if I use it. It changes whole structure of my page.

CODE SNIPPET (Please expand the snippet before seeing results):

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 Not currently sir. It was my last semester college project and I thank you for helping me out. This semester I am currently learning Android. I wish to comeback to HTML & CSS because I have lot to learn and practice. — Abhay, Jan 29 '19 at 16:04
@Bharata do you use twitter ? In case I post an question I can inform you there? — Abhay, Jan 29 '19 at 16:16
Unfortunately I do dot use twitter, but you can always inform me for example here or under some one my post, or even in **[chat](https://chat.stackoverflow.com/users/9801830/bharata)**. Copy this link. — Bharata, Jan 29 '19 at 16:28
@Bharata okay sir. Thanks a lot for being there for beginners like us. — Abhay, Jan 29 '19 at 16:38

score 1 · Accepted Answer · answered Sep 14 '18 at 13:48

You need couple of changes here in your content, links and link-contents class style. I have added height of content dynamic height: calc(100vh - 14%); removed position:fixed and added overflow: auto; in links style. Most important thing I have added display: flex; in content and flex-grow: 1; in links-content so link-contents will grow in remaining space..

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

I have accepted your solution for time being sir. A small problem is there that On changing window size a scroll a scroll bar gets added to `links` div. Can't font-sizes adapt to change? — Abhay, Sep 15 '18 at 10:57
Also sir as you can see in Question I want to know why the `header` div is fixed without using `position : fixed` for it ? — Abhay, Sep 15 '18 at 10:59
It is not fixed actually.. Header height is 8% of the page and footer height is 6% of the page (Sum is 14%). We have set content height to (100vh - 14%) so you are not going to have the scrollbar on the body. If you set the content height to (100vh - 1% or any less than 14) then you will see the scrollbar and on scroll you will find header is not fixed. :) — , Sep 16 '18 at 22:41
Font size will never adapt the body change.. you have to code for that :) — , Sep 16 '18 at 22:42

Architect · Answer 2 · 2018-09-14T13:54:28.247

Use height instead of min-height on your .links and .link-contents divs. Also set the overflow of those divs to hidden, so that the content doesn't overlap the footer.

The header is not fixed, it seems that way because you don't have a scroll on your page it's just in its position as the others are fixed.

Also I would suggest that you use fixed height for your footer and header, the way you did is not practical as the 8% height could be too small on some screens. To achieve that do this:

.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%;
}

If you want to change the height of your header and footer to your own, just remember to update the height: calc( 100% - "sum of your footer and header height in px" ).

Let me know if this worked.

Its not working. You can see the output here: https://imgur.com/a/ojgZtRe — Abhay, Sep 15 '18 at 10:47
In my code header is fixed sir. You can try adding products clicking Add more products Button many times so that submit button goes out of view port and scrollbar appears . On scrolling you will see that header div is fixed. — Abhay, Sep 15 '18 at 10:50

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

2 Answers2