拉伸格至100％页面长度

我已经看过这个问题已经提出的为重复：拉伸格至100％页面长度

Make a div fill the height of the remaining screen space

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

下面是容器的div代码直至并包括左手导航：

/* 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">

来源

2011-11-11 321

你已经问了这个两次，其他问题被关闭作为愚蠢：http://stackoverflow.com/questions/90178/make-a-div-fill-the-remaining屏幕空间。如果你想让这个问题保持开放，那么你需要解释为什么上述问题对你的问题没有帮助。谢谢。 – Kev

好的，我已经编辑了你的问题。 – Kev

下一次，编辑您的原始问题，如果它被关闭为dupe然后标记一个mod并解释您为什么不同意。不要一直发布相同的问题，这样会导致降价和帐户暂停。值得花一些时间阅读：http://meta.stackexchange.com/questions/7931/faq-for-stack-exchange-sites。我已经将以前的问题解答合并到了这个问题中。谢谢。 – Kev

我结束了在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>

来源

2012-03-15 22:40:31 321

首先起诉的左侧导航栏中的内容会导致它延长很长时间。所以如果你想要的话，添加更多的内容。其他方式可以使用高度属性并尽可能长地进行设置。从我所了解的HTML中，所有元素都是根据宽度排列的，一旦它用完了屏幕，它们就会堆叠下来。由于div的宽度是20％，因此添加更多元素会导致它向下拉伸。如果我是对的投票！

来源

2011-11-02 12:16:00 satin

添加更多内容不应该是一个选项，您不能添加您不需要的内容，只需按照自己想要的方式查看布局。这里的答案大体上是“让colums 100％高度”，这是一个经典的CSS问题，其中有大量的文章写到。 – scumah

是的，我试过，但它不会工作。元素的高度由该元素的内容决定。 http://jsfiddle.net/satinjeet/9K5Rx/ – satin

不，我只是告诉你，我试过：D ..但cudn't弄清楚。你可以，如果你想尝试填充底部 – satin

而不是使用彩车上的孩子的父和display: table-cell;使用display: table;。这将有效地“将它们浮起来”，并且将它们的高度伸展到父母的100％。

因为我看不到你的标记，我不能提供一个例子，但你应该能够跟随:)

来源

2011-11-11 10:15:54 Kyle

我选择了建议这种方法，因为你已经在尝试float + clearfix方法，并且它不工作。这几乎是你剩下的所有东西，它_will_work。你为什么不想使用displa：table？这很棒！：d – Kyle

拉伸格至100％页面长度

回答

相关问题