Home/ Questions/Q 7643193
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T09:23:12+00:00

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

  • 0

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">
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0