Question

我看过这个被建议重复的问题：

Make a div fill the height of the remaining screen space

然而，这是从2008年开始，相当陈旧。我宁愿不使用Javascript或表来解决这个问题，如果可能的话，我宁愿选择CSS解决方案。

这是容器的代码，包括左手导航：

/* 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;}

这是一个显示主要内容div的简化页面代码：

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

Answer 1

首先起诉左导航栏中的内容导致它延长这么长时间。所以，如果你想要，添加更多内容。另一种方法是你可以使用height属性并尽可能地设置它。根据我的理解html所有元素都按照宽度排列，一旦它用完了屏幕就会叠加下来..因为你的div是20％宽度，添加更多元素会使它向下拉伸。如果我是对的，请投票!!

Answer 2

不使用花车，而是使用父上的display: table;和子上的display: table-cell;。这将有效地“漂浮他们”，并将他们的身高拉伸到父母的100％。

因为我看不到您的标记我无法提供示例，但您应该能够遵循：）

Answer 3

我最终在head.css中使用JS来解决这个问题：

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

将div拉伸至100％页面长度

3 个答案: