100% div height is acting up and i can't find a repeat anywhere online!

**bpetruzzo** · 02-17-2009, 12:36 AM

I've been searching all over the internet and I can't find someone duplicating this problem, so I'm perplexed.

I understand that in CSS you can only assign a 100% height if it's nested inside something else with an assigned height. So, the solution most people have put forth is to assign the body and html tags 100% height. Then, you're able to assign a div 100% height because it has something to factor from.

Well, it works. But it's taking things too literal. I can assign my div 100%, but it literally only takes 100% of the window. If you scroll down, the div does not continue. Instead the content spills out into an open page. The div literally is restricted to the size of the window. If scroll down so that you can see the bottom edge of the window, then resize the window, you can see the div resizing in real time.

At first it seemed like maybe it was a problem with floats being cleared. But there are only two objects floating and they're both cleared immediately afterwords.

Here's my CSS as of right now:

Code:

/* RESET VALUES
************************************/

html{color:#000;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;font-variant:normal;}sup {vertical-align:text-top;}sub {vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{font-size:100%;}legend{color:#000;}



/* GENERAL
***********************************/

html {height:100%}
body{ margin:0 0 0 0; height:100%; min-height:100%; background-color:#454545;background-image:url(images/bg-right.gif); background-repeat:repeat-x; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:12px; letter-spacing:1px; color:#454545;}
a {color:#333; text-decoration:underline;}
a:hover {color:#39F; text-decoration:none;}
.clearleft{clear:left;}
.clearright{clear:right}
.clear {clear:both}



/* CONTAINING & STYLE DIVS 
***********************************/

#content {width:1000px; height:100%; }
#left {width:550px; height:100%; float:left; background-color:#FFF; background-image:url(images/bg-bluehaze.gif); background-repeat:repeat-x;}
#right_shadow {width:54px; height:100%; background-image:url(images/bg-rightedge-bottom.gif); background-repeat:repeat-y; float:left;}


/* HEADER
************************************/

#menu {margin: 10px 0 50px 20px; font-size:10px; text-transform:uppercase; letter-spacing:1px;}
#menu ol li {display:inline;}
#menu a {padding:0 5px 0 0; text-decoration:none;}
#menu a:hover {text-decoration:underline;}
#title {margin:0 0 0 20px;}
#twitter {font-size:10px;}

/* CONTENT
************************************/

.post {margin: 100px 25px 0 25px;

Does anyone know what's going on here?

**mintedjo** · 02-17-2009, 08:08 AM

I dont know whats going on, I'm not going to try to fix your code because I'm not so good at CSS and I find it VERY difficult to manage div heights :-(
It sounds like you are aiming for a sticky footer and its not working so I will point you in the direction of Ryan Fait. A rather snazzy designer and coder.
His sticky footer is nice and tidy - I used his code after spending about 3 days just trying to make a sticky footer :-)

Ryan Fait - CSS Sticky Footer