如何讓內容div跨越頁面的剩餘高度而不滾動？

我正在嘗試創建一個佔用頁面高度100％的頁面，而不顯示滾動條。但是，我想在此之上添加一個標題，當我這樣做時，由於額外的高度而出現滾動條。我嘗試用負底部邊距進行補償以補償額外的長度，但這似乎並未改變長度。如何防止滾動條出現在這個佈局中？如何讓內容div跨越頁面的剩餘高度而不滾動？

這裏是我的代碼：

<html> 
<head> 
    <style type="text/css"> 
    * { 
    margin: 0; 
    padding: 0; 
    } 
    body { 
    background-color: orange; 
    } 
    div#header { 
    background-color: red; 
    height: 50px; 
    } 
    div#content { 
    background-color: yellow; 
    height: 100%; 
    margin-bottom: -50px; 
    } 
    </style> 
</head> 

<body> 
    <div id="header"> 
    HEADER 
    </div> 
    <div id="content"> 
    Test Content 
    </div> 
</body> 
</html>

編輯：我做了一個嘗試的margin-top：帶襯墊頂-50px：前50像素上的內容股利。然而，它並不像我預期的那樣工作，因爲即使我設置了z-index，內容也會與頭部重疊。

來源

2011-09-07 user449511

內容的div沒有被拉伸可言，至少不會在Chrome中，哪些瀏覽器你是否正在使用？ – sdleihssirhc

根據你的應用程序，你可以在主體中添加'overflow：hidden'。 – ngen

你試過設置爲100％，併爲你的標題和內容分配一個百分比高度？ – KMC

這裏的另一種方式

http://jsfiddle.net/b27e8/

* { 
    margin: 0; 
    padding: 0; 
    } 
    body { 
    background-color: orange; 
    } 
    div#header { 
    background-color: red; 
    height: 50px; 
    } 
    div#content { 
    background-color: yellow; 
    top:50px; 
    bottom:0px; 
    width:100%; 
    position:absolute; 
    }

來源

2011-09-07 00:43:07

我使用固定您的問題：

div#header { 
background-color: red; 
height: 10%; } 
div#content { 
background-color: yellow; 
height: 90%; 
margin-bottom: -50px; }

你可能有與％的發揮，以解決這個問題......

編輯：我用火狐6測試，順便說一句。你可以得到準確的百分比也使用小數（例如，95.6%

來源

2011-09-07 00:37:26 Singular1ty

我不希望標題是流體高度，我希望它是一個固定的高度，並根據瀏覽器長度使內容填充頁面的其餘部分。 – user449511

哦，我明白了...對不起！ – Singular1ty

沒問題，謝謝幫忙！ – user449511

如何讓內容div跨越頁面的剩餘高度而不滾動？

回答

相關問題