I would like to layout a grid with an always-visible, fixed-position header and footer and a content element that expands to fit the remainder of the container's height with a scrollbar inside.
我想布置一个网格,其中包含一个始终可见的固定位置页眉和页脚以及一个内容元素,该内容元素可以扩展以适应容器高度的其余部分,并且内部有一个滚动条。
<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>
I can work this fine and simple if I set a fixed height on #content but in larger resolutions, I want #content to fill out the white space.
如果我在#content上设置一个固定的高度但是在更大的分辨率下,我可以正常工作,我希望#content填充空白区域。
Another caveat; the height on #container, #header, and #footer are unknown.
另一个警告; #container,#header和#footer的高度未知。
jQuery is a possibility.
jQuery是一种可能性。
EDIT: This bit worked out for me, adapted from Senad's answer;
编辑:这一点对我有用,改编自Senad的答案;
function resizeGrid() {
$("div.items").innerHeight(0);
$("div.items").innerHeight($(window).height() - $("body").innerHeight() - 22)
}
3 个解决方案
#1
5
CSS
#header { position: fixed; top: 0; left: 0; height: 100px; }
#footer { position: fixed; bottom: 0; left: 0; height: 100px; }
#content { margin-top: 100px;
JS
$(document).ready(function(){
resizeContent();
//attach on resize event
$(window).resize(function() {
resizeContent();
});
});
function resizeContent()
{
$('#content').attr('height', $(window).height() - $('#header').height() - $('#footer').height();
}
I hope this will help you:
我希望这能帮到您:
#2
1
#header,
#footer {
width:100%;
height:20px;
background:#ccc;
position:fixed
}
#header {top:0}
#footer {bottom:0}
html, body {height:100%}
Pure css, no js :)
纯css,没有js :)
#3
0
Depends on what you mean fixed. If you mean always on the page, then:
取决于你的意思固定。如果您的意思是始终在页面上,那么:
#header, #footer { position: fixed; height 150px; }
#content { margin: 150px 0px; }
Any background should go on the body element
任何背景都应该放在body元素上
If you mean at bottom at top of content, then you just need a sticky footer.
如果你的意思是在内容的顶部,那么你只需要一个粘性页脚。
If you mean that the header and footer are auto-height, and you want them at a fixed point on the page at all times, then you'll want jQuery since there is not an easy cross-browser solution.
如果您的意思是页眉和页脚是自动高度,并且您希望它们始终位于页面上的固定点,那么您将需要jQuery,因为没有简单的跨浏览器解决方案。
$('#content').css({marginTop: $('#header').outerHeight(), marginBottom: $('#footer').outerHeight() });
#1
5
CSS
#header { position: fixed; top: 0; left: 0; height: 100px; }
#footer { position: fixed; bottom: 0; left: 0; height: 100px; }
#content { margin-top: 100px;
JS
$(document).ready(function(){
resizeContent();
//attach on resize event
$(window).resize(function() {
resizeContent();
});
});
function resizeContent()
{
$('#content').attr('height', $(window).height() - $('#header').height() - $('#footer').height();
}
I hope this will help you:
我希望这能帮到您:
#2
1
#header,
#footer {
width:100%;
height:20px;
background:#ccc;
position:fixed
}
#header {top:0}
#footer {bottom:0}
html, body {height:100%}
Pure css, no js :)
纯css,没有js :)
#3
0
Depends on what you mean fixed. If you mean always on the page, then:
取决于你的意思固定。如果您的意思是始终在页面上,那么:
#header, #footer { position: fixed; height 150px; }
#content { margin: 150px 0px; }
Any background should go on the body element
任何背景都应该放在body元素上
If you mean at bottom at top of content, then you just need a sticky footer.
如果你的意思是在内容的顶部,那么你只需要一个粘性页脚。
If you mean that the header and footer are auto-height, and you want them at a fixed point on the page at all times, then you'll want jQuery since there is not an easy cross-browser solution.
如果您的意思是页眉和页脚是自动高度,并且您希望它们始终位于页面上的固定点,那么您将需要jQuery,因为没有简单的跨浏览器解决方案。
$('#content').css({marginTop: $('#header').outerHeight(), marginBottom: $('#footer').outerHeight() });