固定頁眉和頁腳與自動高度，滾動內容？

我想用一個始終可見的，固定位置的頁眉和頁腳以及一個內容元素來佈局網格，該元素通過內部的滾動條展開以適應容器高度的其餘部分。固定頁眉和頁腳與自動高度，滾動內容？

<div id="container"> 
    <div id="header">Header Text</div> 
    <div id="content"> 
    <div id="row1">Content</div> 
    <div id="row2">Content</div> 
    <div id="row3">Content</div> 
    <div id="row4">Content</div> 
    <div id="row5">Content</div> 
    <div id="row6">Content</div> 
    <div id="row7">Content</div> 
    </div> 
    <div id="footer">Footer Text</div> 
</div>

我可以工作這一優良和簡單，如果我設置＃內容固定的高度，但在較大的決議，我想＃內容填寫空白。

另一個警告; #container，#header和#footer上的高度未知。

jQuery是一種可能性。

編輯：這一點爲我工作，改編自Senad的答案;

function resizeGrid() { 
    $("div.items").innerHeight(0); 
    $("div.items").innerHeight($(window).height() - $("body").innerHeight() - 22) 
}

來源

2011-11-22 Orange Kid

CSS

#header { position: fixed; top: 0; left: 0; height: 100px; } 
#footer { position: fixed; bottom: 0; left: 0; height: 100px; } 
#content { margin-top: 100px;

$(document).ready(function(){ 
    resizeContent(); 
    //attach on resize event 
    $(window).resize(function() { 
     resizeContent(); 
    }); 
}); 
function resizeContent() 
{ 
    $('#content').attr('height', $(window).height() - $('#header').height() - $('#footer').height(); 
}

我希望這將幫助你：

來源

2011-11-22 18:49:05

這工作。謝謝你，先生。 –

取決於你的意思是固定的。如果你的意思是永遠的頁面，然後在：

#header, #footer { position: fixed; height 150px; } 
#content { margin: 150px 0px; }

任何背景應該去body元素

如果你的意思是在底部在內容的頂部，那麼你只需要一個sticky footer。

如果您的意思是頁眉和頁腳是自動調整高度的，並且您希望它們始終處於頁面上的固定位置，那麼您會想要jQuery，因爲沒有簡單的跨瀏覽器解決方案。

$('#content').css({marginTop: $('#header').outerHeight(), marginBottom: $('#footer').outerHeight() });

來源

2011-11-22 18:48:39 Ktash

#header, 
#footer { 
    width:100%; 
    height:20px; 
    background:#ccc; 
    position:fixed 
} 

#header {top:0} 
#footer {bottom:0} 

html, body {height:100%}

純CSS，沒有js :)

來源

2011-11-22 18:57:34

固定頁眉和頁腳與自動高度，滾動內容？

回答

相關問題