本文介绍了固定标题&页脚与自动高度,滚动内容?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想使用一个总是可见的,固定位置的页眉和页脚和一个内容元素来布局网格,该内容元素通过内部的滚动条进行扩展以适应容器高度的其余部分。
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>
如果我在#content上设置了一个固定的高度,但是在更大的分辨率下,我想要#content填充空格。
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.
另一个警告; #container,#header和#footer的高度未知。
Another caveat; the height on #container, #header, and #footer are unknown.
jQuery是一种可能性。
jQuery is a possibility.
EDIT:这个位适合我,从Senad的答案改编;
function resizeGrid() {
$("div.items").innerHeight(0);
$("div.items").innerHeight($(window).height() - $("body").innerHeight() - 22)
}
推荐答案
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:
这篇关于固定标题&页脚与自动高度,滚动内容?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!