拉伸格至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％頁面長度

回答

相關問題