...

View Full Version : 100% Strech Div with a Sticky Footer



carleihar
11-22-2011, 10:49 PM
Currently, my main content div has a repeated-y background. However, when my text doesn't span the entire window, it cuts off. Instead, I'd like it to stretch all the way down to my sticky footer. I'm no expert at CSS, and I'm stumped. I've searched all over and tried all sorts of fixes, but I just can't see the problem. Help? Thanks!

CSS:

* { margin:0; padding:0; }



html, body, #wrap { height: 100%; min-height:100%;

/* thanks to http://blog.fakedarren.com/2010/01/cross-browser-css-gradients/ */
/* and http://www.puremango.co.uk/2010/04/css-gradient/ */
/* fallback (Opera) */
background: #8cb6e9;
/* Mozilla: */
background: -moz-linear-gradient(top, #8cb6e9, #e0effc);
/* Chrome, Safari:*/
background: -webkit-gradient(linear,
left top, left bottom, from(#8cb6e9), to(#e0effc));
/* MSIE */
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#8cb6e9', EndColorStr='#e0effc', GradientType=0);

font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}



body > #wrap {height: auto; min-height: 100%;}

#main { padding-bottom: 116px; height:100%; } /* must be same height as the footer */

#contentwrapper {
background-image:url(layout/containerbg.jpg);
background-repeat:repeat-y;
margin: 0 auto;
width:1000px;
height:100%;
min-height:100%;
}

#content {
padding:15px;


}

#footer {
position: relative;
margin-top: -116px; /* negative value of footer height */
height: 116px;
background-image:url(layout/footer.png);
width:100%;
background-position:center;
clear:both;
}

/* CLEAR FIX*/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

HTML:

<body>




<div id="wrap">

<div id="main" class="clearfix">

<div id="contentwrapper">
<div id="content">
<div id="text">
<p>Your website content here.</p>
</div> <!--end text div-->

<div id="sidead">

</div> <!--end sidead-->
<div class="clear"></div>
</div> <!--end class content-->
</div><!--end contentwrapper-->

</div> <!--end main -->

</div> <!--end wrap-->

<div id="footer"></div>

</body>

Beefalo
11-22-2011, 11:17 PM
what is the approx. size of your background image?

carleihar
11-22-2011, 11:36 PM
It's about 2000px, but it's set up so that it's centered and any excess just doesn't show unless you expand the window.

Excavator
11-22-2011, 11:39 PM
Hello carleihar,
With a full-height layout you get one element that makes it the full height. In this case it's #wrap.
#main can only be the height of it's content.

I see you have no background image on #wrap so you may be able to repeat-y and center the image there?

Since this is really an image based question, a link to the test site would really help with debugging.

carleihar
11-23-2011, 04:02 AM
I figured it out, thanks everyone! Ending code:


* {margin:0;padding:0;}

/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html {
background: #e0effc;
}

body {

height: 100%;
min-height:100%;


background-repeat: no-repeat;
background: #e0effc;
background: -webkit-gradient(linear, left top, left bottom, from(#8cb6e9), to(#e0effc));
background: -moz-linear-gradient(top, #8cb6e9, #e0effc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8cb6e9', endColorstr='#e0effc');
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;



}

#wrap {
min-height: 100%;
margin: 0 auto;
width:1000px;



}



#main {overflow:auto;
padding-bottom: 116px;
height: 100%;
min-height: 100%;
background-color:#FFFFFF;
border-right:1px solid #a89d6d;
border-left:1px solid #a89d6d;
} /* must be same height as the footer */

#footer {position: relative;
margin-top: -116px; /* negative value of footer height */
height: 116px;
clear:both;

background-image:url(layout/footer.png);
width:100%;
background-position:center;


}

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}



/* IMPORTANT

You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.

<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->

*/


#contentwrapper {


height:100%;
min-height:100%;
}



<body>



<div id="wrap">

<div id="main">





<div id="contentwrapper">
<div id="content">
<div id="text">
<p>Your website content here.</p>
</div> <!--end text div-->


</div> <!--end content-->
</div> <!--END CONTENTWRAPPER-->

</div> <!--END MAIN-->

</div> <!--END WRAP-->




<div id="footer"></div>

</body>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum