Stretch div to 100% Page Length

Question

I have looked at this question which has been suggested as a duplicate:

Make a div fill the height of the remaining screen space

However it's from 2008 and is fairly old. I'd rather not use Javascript or tables to solve this and would prefer a CSS solution if at all possible.

Here's the code for the container divs up to and including the left hand nav:

/* Header Wrapper */
#header-wrapper {width:100%;height:120px;margin:0 auto;background:transparent url(/images/Structure/blue-transparent-repeat2.png);background-position:50% 50%;}
#clouds {height:120px;width:100%;margin:0 auto;background:transparent url(/images/Structure/clouds.png) repeat-x;background-position:50% 50%;}
#opaque {width:100%;margin:0 auto;height:120px;background:transparent url(/images/Structure/white-transparent.png);}
#header-content {margin:0 auto;position:relative;width:100%;max-width:1280px;height:85px;}

/* Content Wrapper */
    #content-wrapper {float:left;background:url("/images/cream.jpg") repeat-x;width:100%;}
    #shell {height:100%;width:100%;background:#fffef8 url("/images/Structure/signpost.gif") 5% 100% no-repeat}

    /* Page Content Wrapper */
    #page-outer{height:100%;margin:0 auto;padding:0 0.5% 8px;max-width:1280px;}
    #page-content {height:100%;clear:both;margin:0 0.7%;}

    /* Left Nav */
    #left-nav {padding-top:7px;border-right:1px solid #ede9e8;float:left;width:20%;margin:0 0 110px 0;background:url(/images/header-repeat-left.png) repeat-y;background-position:right top;}

And here's a simplified page code showing the main content divs:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Inside <%=server.HTMLEncode(Session("PublicFranchiseName"))%> Business Directory and Local Guide – Your Inside Guide to <%=server.HTMLEncode(Session("PublicFranchiseName"))%></title>
</head>
<body class="home">
<div id="header-wrapper">
 <div id="clouds">
  <div id="opaque">
   <div id="header-content"></div>      
    <div class="menu2"></div>
  </div>
 </div>
</div>
<div id="content-wrapper">
<div id="shell">
<div id="page-outer" class="clearfix">
<div id="page-content" class="clearfix">
<!--Start Left Nav-->
<div id="left-nav">

You've asked this twice already and the other questions were closed as dupes of: http://stackoverflow.com/questions/90178/make-a-div-fill-the-remaining-screen-space . If you want this one to stay open then you need to explain why the aforementioned question does not help in your question. Thanks. — Kev, Nov 11 '11 at 10:52
Next time, edit your original question, if it gets closed as dupe then flag a mod and explain why you disagree. Don't keep posting the same question, that way leads to downvotes and account suspension. It would be worth spending some time reading this: http://meta.stackexchange.com/questions/7931/faq-for-stack-exchange-sites. I have merged the previous questions answers into this one. Thanks. — Kev, Nov 11 '11 at 11:20

score 0 · Answer 1 · answered Nov 02 '11 at 12:16

0

First of all sue the content in the left-nav bar is causing it to stretch so long. so if you want that , add more content. other way you can use height attribute and set it as long as you can. from what i understand html all elements are arranged according to width and once it runs out of screen they stack down .. since your div is 20% width , adding more elements will cause it to stretch downwards . Vote up if i am right !!

answered Nov 02 '11 at 12:16

satin

697
2
7
19

Adding more content should not be an option, you can't add content you don't need just to see the layout the way you want. The answer here is, roughly, "make the colums 100% height", wich is a classic CSS problem with tons of articles written about. – scumah Nov 02 '11 at 12:51
yea i tried that , but it won't work . height of an element is determined by the content of that element. http://jsfiddle.net/satinjeet/9K5Rx/ – satin Nov 02 '11 at 13:20
no i was just showing you that i tried :D .. but cudn't figure out . You can if you want try padding-bottom – satin Nov 02 '11 at 13:32

score 0 · Answer 2 · answered Nov 11 '11 at 10:15

0

Instead of using floats use display: table; on the parent and display: table-cell; on the children. This will effectively "float them left" and also stretch their height to 100% of the parent.

Because I can't see your markup I can't provide an example, but you should be able to follow :)

answered Nov 11 '11 at 10:15

Kyle

65,599
28
144
152

I chose to suggest this method as you already are trying the float+clearfix method and it's not working. this is pretty much all you have left and it _will_work. Why don't you want to use displa: table? It's great! :D – Kyle Nov 11 '11 at 12:07

score 0 · Accepted Answer · answered Mar 15 '12 at 22:40

I ended up fixing this using JS in head.css:

<script type="text/javascript">
matchColumns=function(){ 
     var divs,contDivs,maxHeight,divHeight,d; 
     divs=document.getElementsByTagName('div'); 
     contDivs=[]; 
     maxHeight=0;  
     for(var i=0;i<divs.length;i++){  
          // make collection with <div> elements with class attribute "equal"
          if(/\bequal\b/.test(divs[i].className)){ 
                d=divs[i]; 
                contDivs[contDivs.length]=d;  
                if(d.offsetHeight){ 
                     divHeight=d.offsetHeight;                  
                } 
                else if(d.style.pixelHeight){ 
                     divHeight=d.style.pixelHeight;                  
                } 
                maxHeight=Math.max(maxHeight,divHeight); 
          } 
     } 
     for(var i=0;i<contDivs.length;i++){ 
          contDivs[i].style.height=maxHeight + "px"; 
     } 
}  
window.onload=function(){ 
     if(document.getElementsByTagName){ 
          matchColumns();            
     } 
} 
</script>

Stretch div to 100% Page Length

3 Answers3