全部高度和寬度，固定標題，全部內容高度與CSS

我一直在搜索這個SO，但我找不到完全相似的東西。我試圖實現的是有一個頁面，這是一個高度和寬度完整，但確實有一個固定的標題。內容高度需要剩餘的剩餘區域，但該區域需要有100％的高度，在SO上找到的大多數html代碼僅使用height：auto。基本上，我想這樣做，這樣我可以設置樣式：添加邊框等。這裏是到目前爲止的代碼：全部高度和寬度，固定標題，全部內容高度與CSS

<html> 
<head> 
    <title>Test</title> 
    <style type="text/css"> 
    body, html { 
    height:100%; 
    } 

    body { 
    margin:0; 
    padding:0; 
    } 

    #header{ 
    height:50px; 
    background:green; 
    width:100%; 
    } 

    #wrapper { 
    background:blue; 
    position:relative; 
    min-height:100%; 
    height:auto !important; 
    height:100%; 
    } 

    #content { 
     margin: 10px; 
     background-color: black; 
     height: 100%; 
     width: 100%; 
border: 3px dashed gray; 
    } 
    </style> 
</head> 
<body> 
    <div id="wrapper"> 
    <div id="header">header</div> 
    <div id="content"></div> 
    </div> 
</body> 
</html>

來源

2011-08-18 dandoen

所以......有什麼問題呢？ – Nayish

問題是，如果您爲#content設置100％的高度，則不會佔用剩餘空間（應爲100％-50像素）的100％，但總共需要100％。 – dandoen

參見：http://jsbin.com/agiyer

注意，如果含量太高而無法裝進#content，它將被簡單地隱藏起來。

HTML：

<div id="header">header</div> 
<div id="content">content</div>

CSS：

#header { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 50px; 
    background: green 
} 
#content { 
    position: absolute; 
    top: 50px; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    border: 3px dashed gray; 
    background: #ccc 
}

來源

2011-08-18 09:05:34 thirtydot

這是一個美麗的解決方案！ – Nayish

確實很美！但是，一個小問題是，如何將內容放在＃內容中，例如寬度和高度均爲100％。已經做了一些更改：http://jsbin.com/agiyer/4/，但滾動條出現時，它不應該。非常感謝！ – dandoen

@dandoen：喜歡這個？ http://jsbin.com/agiyer/5 – thirtydot

全部高度和寬度，固定標題，全部內容高度與CSS

回答

相關問題