Trey_23 Trey_23 - 1 year ago 93
CSS Question

I have built a webpage using HTML and I have a <div id= "main"> section that I am trying to extend down the whole page

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