How do I make <div> stretch exactly do the bottom?

Question

I want this to reach exactly the bottom of the screen, however I have a header, so if I set height: 100%;, it is too big, and the page is scrollable. Obviously the same with 100vh. And I don't want to calculate it manually, because of responsiveness. My CSS may look crappy, because I tried literally everything I could think of.

 *{ box-sizing: border-box; } html, body{ min-height: 100% !important; height: 100%; margin: 0; padding: 0; } body{ font-family: Verdana, Geneva, Tahoma, sans-serif; color: #2e3e56; background-color: whitesmoke; width: 65%; margin: auto; } /*header*/ #header{ text-align: center; background-color: #2e3e56; color: #d0cbc5; font-size: 1.1rem; padding: 0.3% 0% 0.3% 0%; margin: 0; top: 0; } #header table{ width: 100%; } #hnametd p{ margin: 0; padding: 0; color: white; font-weight: bold; } #hnametd h1{ font-family: 'Times New Roman', Times, serif; margin: 0; padding: 0; } #hlogotd{ width: 18%; padding: 0; } #hlogo{ width: 100%; float: left; overflow: hidden; } /*-------*/ /*hr-area*/ hr{ height: 10px; border: none; margin: 0; padding: 0; } .dblue{ background-color: #156390; } .lblue{ background-color: #7296ab; } .gray{ background-color: #d0cbc5; } .hrbottom{ height: 15px; width: 100%; } /*-------*/ #wrapper{ height: fit-content; width: 100%; background-color: #2e3e56; padding-right: 3.5%; overflow: hidden; } /*sibebar*/ #sidebar{ float: left; color: white; font-size: 0.955rem; padding: 2.2% 0 2.2% 2.2%; max-width: 21%; } #sidebar ul{ list-style-type: none; margin: 0 auto; padding: 0; } .con-li{ margin: 1em 0 1em 0; } #sidebar h2{ font-family: 'Times New Roman', Times, serif; margin: 0; padding: 0; color: #d0cbc5; } #sidebar a{ text-decoration: none; color: white; } #sidebar a:hover{ color: #7296ab; } /*----*/ /*main*/ #main{ z-index: 1; background-color: white; font-size: 1rem; min-height: 100vh; height: fit-content; width: 77.5%; float: right; overflow: hidden; padding: 0.625rem; } #main h1{ font-family: 'Times New Roman', Times, serif; } #main p{ width: 100%; text-align: justify; }

 <div id="header"> <table> <tr> <td id="hlogotd"><img src="logo.svg" alt="Logo" id="hlogo"></td> <td id="hnametd"> <h1>Header heading</h1> <p>Header placeholder text.</p> </td> </tr> </table> </div> <hr class="dblue"> <hr class="lblue"> <hr class="gray"> <div id="wrapper"> <div id="sidebar"> <h2>Sidebar heading</h2> <p>Some placeholder text.</p> </div> <div id="main"> <h1>Welcome!</h1> <hr class="dblue"> <p>Some placeholder text.</p> </div> </div> <hr class="gray hrbottom"> <hr class="lblue hrbottom"> <hr class="dblue hrbottom">

Answer 1

There are a few ways of doing this. One way would be to calculate the minimum height, by subtracting everything else (when added up). In this case, your header and those 6 <hr> tags add up to 247px. You can also include support for different browsers. You can also use <header> tags instead of a div.

 *{ box-sizing: border-box; } html, body{ min-height: 100% !important; height: 100%; margin: 0; padding: 0; } body{ font-family: Verdana, Geneva, Tahoma, sans-serif; color: #2e3e56; background-color: whitesmoke; width: 65%; margin: auto; } /*header*/ #header{ text-align: center; background-color: #2e3e56; color: #d0cbc5; font-size: 1.1rem; padding: 0.3% 0% 0.3% 0%; margin: 0; top: 0; } #header table{ width: 100%; } #hnametd p{ margin: 0; padding: 0; color: white; font-weight: bold; } #hnametd h1{ font-family: 'Times New Roman', Times, serif; margin: 0; padding: 0; } #hlogotd{ width: 18%; padding: 0; } #hlogo{ width: 100%; float: left; overflow: hidden; } /*-------*/ /*hr-area*/ hr{ height: 10px; border: none; margin: 0; padding: 0; } .dblue{ background-color: #156390; } .lblue{ background-color: #7296ab; } .gray{ background-color: #d0cbc5; } .hrbottom{ height: 15px; width: 100%; } /*-------*/ #wrapper{ height: fit-content; width: 100%; background-color: #2e3e56; padding-right: 3.5%; overflow: hidden; } /*sibebar*/ #sidebar{ float: left; color: white; font-size: 0.955rem; padding: 2.2% 0 2.2% 2.2%; max-width: 21%; } #sidebar ul{ list-style-type: none; margin: 0 auto; padding: 0; } .con-li{ margin: 1em 0 1em 0; } #sidebar h2{ font-family: 'Times New Roman', Times, serif; margin: 0; padding: 0; color: #d0cbc5; } #sidebar a{ text-decoration: none; color: white; } #sidebar a:hover{ color: #7296ab; } /*----*/ /*main*/ #main{ z-index: 1; background-color: white; font-size: 1rem; min-height: calc(100vh - 247px); height: -o-calc(100% - 247px); /* opera */ height: -webkit-calc(100% - 247px); /* google, safari */ height: -moz-calc(100% - 247px); /* firefox */ height: 100%; width: 77.5%; float: right; overflow: hidden; padding: 0.625rem; } #main h1{ font-family: 'Times New Roman', Times, serif; } #main p{ width: 100%; text-align: justify; }

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="test.css"> </head> <header id="header"> <table> <tr> <td id="hlogotd"><img src="logo.svg" alt="Logo" id="hlogo"></td> <td id="hnametd"> <h1>Header heading</h1> <p>Header placeholder text.</p> </td> </tr> </table> </header> <hr class="dblue"> <hr class="lblue"> <hr class="gray"> <div id="wrapper"> <div id="sidebar"> <h2>Sidebar heading</h2> <p>Some placeholder text.</p> </div> <div id="main"> <h1>Welcome!</h1> <hr class="dblue"> <p>Some placeholder text.</p> </div> </div> <hr class="gray hrbottom"> <hr class="lblue hrbottom"> <hr class="dblue hrbottom"> </html>

Answer 2

The below uses flexbox. I avoided changing your HTML by making the body a flex container (but it could be another parent element - it too would need to be 100% height).

First, my changes, just to highlight them:

/* flex container - happens to be body here */
body {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

html, body{
    height: 100vh;
}

#wrapper{
    flex: 1 1 auto;
}

Full CSS based on your original can be found here: https://codepen.io/andrew1357/pen/rNmwGpz?editors=1100