Trey_23 Trey_23 - 6 months ago 12
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-family:"Calibri";
font-size: 12pt;
text-align: left;
text-indent: 48px;
color: #000000;
}

Answer

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

Comments