Why is my bottom div rendering outside of the window when using 50% height for the top and bottom?

Issue

Im trying to make a split screen layout with an upper half and lower half div. I have the parent container height set at 100%, and each inner div with a height set at 50%. However my lower div is rendering outside of the window and I can't see the bottom padding. If I lower the percentage slightly it looks okay, but when resizing the window the padding size doesn't stay consistent. I'd like to have an even 50% split of the top and bottom divs, with even padding all the way around.

https://jsfiddle.net/sherberthead/m96dh81q/

html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

#main {
  background-color: lightblue;
  height: 100%;
  overflow: hidden;
}

#top {
  padding: 20px;
  margin: 20px;
  background-color: pink;
  height: 50%;
}

#lower {
  padding: 20px;
  margin: 20px;
  background-color: gray;
  height: 50%;
}

<div id="main">
  <div id="top">
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
  </div>
  <div id="lower">
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
  </div>
</div>

Solution

When you set the height of each child div to 50% and also add padding and margin, the actual space taken by each div becomes more than 50% of the parent's height. This is because padding and margin are added to the height, resulting in the content overflowing.

To fix this, you can use the CSS box-sizing property. By setting it to border-box, the padding and border of the element will be included within its specified width and height.

This will not take into account the margin though, because margins take place outside the div. To account for the margin you need to remove the margin from the size of the div.

Below is an example.

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

*, *::before, *::after {
  box-sizing: border-box; /* Add this line */
}

#main {
  background-color: lightblue;
  height: 100%;
  overflow: hidden;
}

#top {
  padding: 20px;
  margin: 20px;
  background-color: pink;
  height: calc(50% - 40px); /* Adjust height to account for margin */
}

#lower {
  padding: 20px;
  margin: 20px;
  background-color: gray;
  height: calc(50% - 40px); /* Adjust height to account for margin */
}

Answered By - Jacob