如何保持DIV拉伸到高度100％的網頁底部並溢出：僅使用CSS自動生成？

Salam全部，如何保持DIV拉伸到高度100％的網頁底部並溢出：僅使用CSS自動生成？

我有一個HTML頁面，有兩個部分，標題和內容，標題高度已知和固定，內容高度應填滿網頁的其餘部分。當內容部分填充網頁的其餘區域時，如果內容大於網頁的高度（我不想看到網頁滾動條，只有內容DIV滾動條），它應該顯示滾動條。

我已經使用JavaScript這樣做了（我已經得到了我想要的結果），

我的問題是：我可以使用CSS相同的行爲？

下面是代碼：

CSS文件（的site.css）：

html, body 
{ 
height:100%; 
width:100%;  
padding:0; 
margin:0; 
} 

#header 
{ 
height:85px; 
width:100%; 
background-color : yellow; 
} 

#container 
{ 
height: 100%; 
width:auto; 
background-color : green; 
padding:2px; 
margin: 0 auto; 
} 

#maindiv 
{ 
height:100%; 
width:100%; 
overflow:auto; 
}

HTML文件：

<!DOCTYPE html> 
<html> 
<head> 
<link href="Site.css")" rel="stylesheet" type="text/css"/> 
</head> 
<body onresize="onheightchanged()" onload="onheightchanged()"> 
    <table id="header"> 
     <tr> 
      <td> 
      some headers <br /> 
      some headers <br /> 
      some headers <br /> 
      some headers <br /> 
      </td> 
     </tr> 
    </table> 
    <div id="container"> 
     <div id="maindiv"> 
      contents <br />contents <br />contents <br />contents <br />contents <br />contents <br /> 
      contents <br />contents <br />contents <br />contents <br />contents <br />contents <br /> 
      contents <br />contents <br />contents <br />contents <br />contents <br />contents <br /> 
      contents <br />contents <br />contents <br />contents <br />contents <br />contents <br /> 
      contents <br />contents <br />contents <br />contents <br />contents <br />contents <br /> 
      contents <br />contents <br />contents <br />contents <br />contents <br />contents <br /> 
     </div> 
    </div> 

    <script type="text/javascript"> 
     function getDocHeight() { 
      var D = document; 
      return Math.max(
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), 
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)); 
     } 


     function onheightchanged() { 
      var container = document.getElementById("container"); 
      var newheight = getDocHeight() - 90; // 90 = header height (85) + padding/margin (5) 
      container.style.height = newheight + "px"; 
     } 
    </script> 
</body> 
</html>

來源

2011-09-13 Shadi

你可能需要設置div容器絕對是這樣的：

#container { 
    position: absolute; 
    top: 85px; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
    overflow: auto; 
    background-color : green; 
}

您也可以嘗試使用position: fixed。

編輯：加我的版本的範例：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
    html, body 
    { 
    height:100%; 
    width:100%;  
    padding:0; 
    margin:0; 
    } 

    #header 
    { 
    height:85px; 
    width:100%; 
    background-color : yellow; 
    } 

    #container { 
     position: absolute; 
     top: 85px; 
     bottom: 50px; 
     left: 200px; 
     right: 30px; 
     overflow: auto; 
     background-color : green; 
    } 

    #maindiv 
    { 
    height:100%; 
    width:100%; 
    overflow:auto; 
    } 
    </style> 
    </head> 
<body> 
<table id="header"> 
<tr> 
     <td> 
     some headers <br /> 
     some headers <br /> 
     some headers <br /> 
     some headers <br /> 
     </td> 
    </tr> 
</table> 
<div id="container"> 
    <div id="maindiv"> 
     contents <br />contents <br />contents <br />contents <br />contents <br />contents <br /> 
     contents <br />contents <br />contents <br />contents <br />contents <br />contents <br /> 
     contents <br />contents <br />contents <br />contents <br />contents <br />contents <br /> 
     contents <br />contents <br />contents <br />contents <br />contents <br />contents <br /> 
     contents <br />contents <br />contents <br />contents <br />contents <br />contents <br /> 
     contents <br />contents <br />contents <br />contents <br />contents <br />contents <br /> 
    </div> 
</div> 
</body> 
</html>

來源

2011-09-13 08:26:01

謝謝你的回答，這個解決方案完美適用於IE和Opera，Chrome也很好用，但FF 6.0.2在調整頁面大小時仍然顯示網頁滾動條。 – Shadi

奇怪的是，在我的FF 6.0中工作正常。滾動條來自容器。您可以通過調整左側，右側和底部位置來測試它，以便容器不會觸摸頁面邊框。它應該更好地顯示頁面的行爲。 –

我沒有運氣，DIV高度不會在您調整頁面大小時自動刷新，您需要按F5才能獲得正確的行爲，任何線索？ – Shadi

使用溢出-Y：隱藏;其中產生滾動在該CSS。

來源

2011-09-13 08:12:46

overflow:auto不適用於基於百分比的高度。你可以做的也是在onHeightChanged()函數中設置#maindiv的高度，之後overflow:auto應該工作。

來源

2011-09-13 08:13:48

你又提到我的JavaScript，我已經得到了我想要使用javascript的結果，我希望它只是使用CSS。 – Shadi

如何保持DIV拉伸到高度100％的網頁底部並溢出：僅使用CSS自動生成？

回答

相關問題