HTML中灵活的页眉、可滚动体和页脚
我试图创建一个简单的HTML布局，其中有一个页眉、内容和页脚部分垂直布局。
页眉和页脚的高度应该是灵活的，由内容决定。
内容部分的高度应该是剩余的高度，因此整个布局使用窗口的全部高度。内容部分将是可滚动的。
因此，为了：
- 标头高度取决于内容高度。无scrollbars.
- Content.高度是剩余的；window_height - (header_height + footer_height)。如果需要滚动条(溢出:auto；)
- 页脚。高度取决于内容高度。没有滚动条。
静态页眉和页脚高度有很多示例，但我发现没有一个能处理基于内容的高度。
我试过位置为绝对/相对/固定的普通div。我已经尝试过display: table/table-row/table-cell的几种配置。我甚至试过用实际的。但这些似乎都不起作用。以下是许多失败尝试中的一个：http://jsbin.com/uveloj/15/edit
如果没有脚本(只要有可能，我都不愿依赖JS )，我如何才能做到这一点呢？
回答 3
Stack Overflow用户
发布于 2011-12-27 13:27:13
如果不使用JavaScript，我认为这是不可能的。为了得到中间的卷轴，你想要的内容区域必须有一个设定的高度。如果页眉和页脚可以动态更改，则无法在不使用JavaScript的情况下更新内容区域的高度以适应滚动。但是，如果您只想编写几行JS，这是一个非常简单的布局。我有一个很好的例子给你：
http://jsfiddle.net/rogerblanton/8ctJJ/
不应使用框架。
Stack Overflow用户
发布于 2011-12-27 13:35:07
你想过用画框吗？
Stack Overflow用户
发布于 2014-04-30 13:15:03
我很久以后才看到这条线，但发现它很有用。
我发现，在一般情况下，您需要考虑到边距、边框等。您可以使用jQuery的outerHeight()函数来帮助：
$(window).resize(function() {
var windowHeight = $(window).height();
var headerHeight = $('div#header').outerHeight(true)
var footerHeight = $('div#footer').outerHeight(true);
var contentHeight = windowHeight - ( footerHeight + headerHeight );
var contentMargins = $('div#content').outerHeight(true) - $('div#content').height();
var contentInnerHeight = contentHeight - contentMargins;
$('div#content').height(contentInnerHeight);
}).resize();除了js修复内容的高度之外，唯一真正重要的一点是让内容的溢出样式是滚动或自动。
下面是罗杰小提琴的一个改进例子：
http://jsfiddle.net/nuAmG/1/
https://stackoverflow.com/questions/8615285
复制相似问题
腾讯云开发者
