Trey_23 Trey_23 - 4 months ago 5x
CSS Question

How to make a div fill the entire page height using css?

I am trying to extend the bottom of the middle section of the webpage(div main) down the whole page, covering up the background at the bottom.

Here is the and image of the webpage and CSS code file for the webpage:

Webpage Image

body {
background: url('black_gradient.png')repeat-x;
text-align: center;
#main {
width: 1000px;
background: url('brown gradient.jpg')repeat-x;
margin: 25px auto;
border: solid 2px #ff3819;
border-bottom: solid 0px;
padding: 10px;
h1 {
text-align: center;
font-family:"Times New Roman";
font: 24pt;
color: #000000;
hr {
height: 2px;
background-color: #000000;
p {
font-size: 12pt;
text-align: left;
text-indent: 48px;
color: #000000;


you can use #main {min-height: 100vh}. The vh unit is 1% of the viewport (window) height.