grapien grapien - 3 months ago 12
CSS Question

How to ensure a webpage's content extends to the bottom of a webpage using only CSS

I have seen very similar questions on Stackoverflow regarding this issue but I have yet to find a solution that works for my scenario. As stated in the title I am looking for an only CSS solution and would prefer to avoid Javascript.

My issue is that I cannot figure out how to create a content box on a webpage that extends from the header of the page to the bottom of the page. The reason I am looking to extend this content box is to have a picture fill the background of the content box on the landing page of my website. I have tried two different techniques and neither one has worked correctly. I have attached both tests with fiddles below:

Scenario One - Have a wrapper that extends the pages with the header and content within the wrapper.

HTML:

<div id="wrapper">
<header>

</header>
<div id="content">
</div>
</div>


CSS:

html, body {
padding: 0px;
margin: 0px;
min-width:1124px;
height: 100%;
min-height: 100%;
width: 100%;
border: 3px solid black;
}
wrapper {
min-height:100%;
border: 3px solid blue;
position:relative;
padding:0;
margin:0;
}

header {
height: 155px;
width: 100%;
padding: 0px;
margin: 0px;
border-bottom: 1px solid black;

/*Top Gradient Defined*/
background: #ffc578; /* Old browsers */
background: -moz-linear-gradient(top, #ffc578 0%, #fb9d23 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc578), color-stop(100%,#fb9d23)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffc578 0%,#fb9d23 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffc578 0%,#fb9d23 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffc578 0%,#fb9d23 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffc578 0%,#fb9d23 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc578', endColorstr='#fb9d23',GradientType=0 ); /* IE6-9 */
}

#content {
width: 100%;
min-width: 1100px;
position: relative;
margin-right:auto;
margin-left:auto;
min-height: 100%;
height:100%;
padding:0;
border: 5px solid red;
background-color:black;
background-size:cover;
position: relative;
}


Fiddle for Scenario 1: http://jsfiddle.net/tPNB4/5/

As you can see the content div will only expand to the length of the content and no the entire length of the wrapper div.

Scenario Two: Have the content sit below the header div.

HTML:

<header>

</header>
<div id="content">
</div>


CSS:

html, body {
padding: 0px;
margin: 0px;
min-width:1124px;
height: 100%;
min-height: 100%;
width: 100%;
border: 3px solid black;
}


header {
height: 155px;
width: 100%;
padding: 0px;
margin: 0px;
border-bottom: 1px solid black;

/*Top Gradient Defined*/
background: #ffc578; /* Old browsers */
background: -moz-linear-gradient(top, #ffc578 0%, #fb9d23 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc578), color-stop(100%,#fb9d23)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffc578 0%,#fb9d23 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffc578 0%,#fb9d23 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffc578 0%,#fb9d23 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffc578 0%,#fb9d23 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc578', endColorstr='#fb9d23',GradientType=0 ); /* IE6-9 */
}

#content {
width: 100%;
min-width: 1100px;
position: relative;
margin-right:auto;
margin-left:auto;
min-height: 100%;
height:100%;
padding:0;
border: 5px solid red;
background-color:black;
background-size:cover;
position: relative;
}


Fiddle for scenario 2 - http://jsfiddle.net/6MGrh/2/

As you can see the content box extends past the length of the page and generates the scroll bar.

If anyone could provide some guidance on why neither of these scenarios is working that would be greatly appreciated.

Answer

One solution is to use absolute positioning of your elements. The content section is then offset by the height of the header and optional footer.

fiddle : http://jsfiddle.net/GVPqP/1

div{min-height:50px;width:90%;
  border:1px solid #aaa;
  position:absolute;left:0;right:0;
}

#header{top:0;}
#content{top:50px;bottom:50px;}
#footer{bottom:0;}