Trey_23 Trey_23 - 1 year ago 69
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;

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download