...

View Full Version : Padding not working with child div on 100% height?



thisisatest
02-20-2011, 11:23 AM
Hey. I can't seem to have bottom-padding for a parent div which has a child div with 100% height. So i've tried to have a 20px-tall "spacer" div below it, but as you can see in the link below, i was unsuccessful..

http://tinyurl.com/6yuvvxl

Here's the code:

<div id="banner"></div>
<div id="menu"></div>
<div id="wrapper"><img src="bg.jpg" name="bg" class="bg" id="bg">
<div id="blackbox">
sdfdgdfg
</div>
<div id="spacer">SPACER</div>
</div>




@charset "utf-8";
/* CSS Document */

*
{
padding: 0;
margin: 0;
overflow-x: hidden;
overflow-y: hidden;

}

body, html
{
height:100%;
min-height:100%;
}

/**********/
/** DIV ***/
/**********/

div#banner
{
width: 100%;
height: 50px;
background: #00F;
}

div#menu
{
width: 100%;
height: 50px;
background: #066;
}

div#wrapper
{
width: 100%;
background: #999;
padding: 20px;
height: 100%;
border-collapse: collapse;
}

img.bg {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: absolute;
top: 102px;
left: -5px;
border: 5px solid #372e2b;
}

@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}

div#blackbox
{
width: 900px;
background: #0FF;
height: 100%;
border-collapse: collapse;
position: absolute;
}

div#spacer
{
height: 20px;
position: absolute;
background: #9F0000;
width: 56px;
}

Mr.
02-20-2011, 08:07 PM
I think the overflow-y is messing it up... but without it you're left with a scroll bar. Tried but failed. Having a body with a 100% height isn't the best solution anyway. Just add your content and a clearfix and let the inner body extend itself with the content.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum