固定頂部高度和動態寬度和高度低於

如何創建一個頂部具有固定高度div並且低於div的佈局，總是佔用頁面的其餘高度和寬度。所以如果窗口被調整大小，第二個div的高度和寬度會相應調整。固定頂部高度和動態寬度和高度低於

什麼，我想實現的是類似上http://omegle.com/

發現一個例子到目前爲止，我想出了這一點：

<html> 
<head> 
<body style="width:100%;height:100%;position:absolute;background:#EEE;margin:0 auto"> 
<div style="border-bottom:1px solid #000;height:50px;background:#900">1st div</div> 
<div style="height:100%;width:100%;background:#090">2nd div</div> 
</body> 
</html>

這讓我在上面固定股利，以及可調整大小的DIV上底部，但是第二個div並沒有考慮到固定div的高度，所以div的高度比我想要的要高。如果我將div 2的高度％縮小到80％，它就會適合，但由於上面的固定高度塊，在調整窗口大小時，它不會保持不變。

我正在尋找一個javascript免費的解決方案。

來源

2011-09-17 John

爲什麼你不給身體的內容背景顏色？

請參閱demo fiddle。

CSS：

html, 
body { 
    width: 100%; 
    height: 100%; 
    padding: 0; 
    margin: 0; 
    background: #090; 
} 
#header { 
    border-bottom: 1px solid #000; 
    height: 50px; 
    background: #900; 
}

而當你需要的內容確實伸展到窗口底部，然後將它放在絕對，就像在this fiddle：

CSS：

#content { 
    position: absolute; 
    top: 51px; 
    bottom: 0; 
    background: #090; 
}

來源

2011-09-17 19:53:32 NGLN

這將僅適用於純文本內容，但如果我在內部添加另一個塊元素，該元素也需要調整大小，例如：http://jsfiddle.net/MNNYf/7/ – John

使用ab溶質定位，請參閱編輯。 – NGLN

固定頂部高度和動態寬度和高度低於

回答

相關問題