考慮到標題，內容區域高度100％

我想填充屏幕的長度，但100％高度的內容區域忽略了標題，這會使區域過長。其他SO解決方案不會完全工作。考慮到標題，內容區域高度100％

我需要能夠調整增長內容（頁面上的滾動條不是#mainView），並且當沒有足夠的內容來填充頁面時，#mainView應該填滿屏幕（沒有滾動）。

CSS：

html, body { height: 100%; margin: 0px; } 
#container{margin:20px;height:100%} 
#header { height: 80px; background: pink; } 
#mainView { height: 100%; background: red; box-sizing: border-box; border:solid 4px pink;border-top:none; }

HTML：

<div id="container"> 
    <div id="header"> 
    --Header 
    </div> 
    <div id="mainView"> 
    --Main 
    </div> 
</div>

來源

2013-08-07 Boone

對不起有什麼問題。你希望你的內容重疊頭部？ – Charles380

我更新了這個問題，更具體的 – Boone

讓頭部覆蓋主視圖中，並墊主視圖的頂部，以避免它：

#header { 
    height:80px; 
    background:black; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
} 

#mainView { 
    height:100%; 
    background:red; 
    padding-top: 80px; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
}

更新的jsfiddle該解決方案：http://jsfiddle.net/upQpj/

來源

2013-08-07 17:11:31

這不允許增加內容增長......看看當我用你的例子做這件事時會發生什麼：http://jsfiddle.net/upQpj/1/ – Pluto

您應該使用箱上漿：
見http://jsfiddle.net/SsF8S/4/

CSS

html,body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    overflow: hidden; 
} 
#header { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 80px; 
    background: black; 
    z-index: 1; 
} 
#wrapper { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    padding: 80px 0 0 0; 
    background: red; 
    z-index: 0; 
    overflow: hidden; 
} 
#mainView { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
}

的Html

<div id="header"> 
    --Header 
</div> 
<div id="wrapper"> 
    <div id="mainView"> 

    </div> 
</div>

來源

2013-08-07 17:12:17

這個解決方案也不會根據海報的要求調整內容... – Pluto

這是一個小調整。我更新了我的答案。謝謝。 –

除了現在滾動條位於標題下方之外... – Pluto

你可以有一個主容器。

<style type="text/css"> 

html,body{height:100%;margin:0px;} 
#header{height:80px;background:black;} 
#container{height:100%; background:red;} 

</style> 

<div id="container"> 
<div id="header"> 
    --Header 
</div> 
<div id="mainView"> 
    --Main 
</div> 
</div>

來源

2013-08-07 17:14:33

我希望主要區域達到屏幕的高度，而不是容器 – Boone

此解決方案的問題是什麼？輸出似乎反映了你想要的。 –

不，你着色了一個容器，試圖隱藏mainView沒有展開的事實。這個小提琴中的黃色方框需要擴大屏幕的高度。 http://jsfiddle.net/WGdJX/ – Boone

一些小的改動你的MAINVIEW的CSS ...

讓它absolute，設置top，left，bottom，並right性能。然後刪除舊的高度，並在需要時更改溢出以添加滾動條。

#mainView { 
    background:red; 
    position:absolute; 
    top:80px; 
    bottom:0; 
    right:0; 
    left:0; 
    overflow:auto; 
}

並有jFiddle例如：http://jsfiddle.net/SsF8S/2/

來源

2013-08-07 17:26:41 Pluto

與西蒙同樣的問題。我不希望頭部固定。我希望整個頁面滾動。 – Boone

所以當你滾動時，你想要顯示身體的背景還是div的背景？也許你可以這樣做... http://jsfiddle.net/SsF8S/7/ – Pluto

不，如果你檢查我的更新代碼，我想添加樣式到我的#mainView，這種方法只是不會讓我做 – Boone

考慮到標題，內容區域高度100％

回答

相關問題