Question

我正在尝试创建一个简单的HTML布局，其中有一个标题，内容和页脚部分垂直布局。

页眉和页脚的高度应该是灵活的，由内容决定。

内容部分的高度应为剩余高度，因此整个布局使用窗口的完整高度。内容部分可以滚动。

所以，按顺序：

头。高度取决于内容高度。没有滚动条。
内容。高度是剩下的; window_height - （header_height + footer_height）。如果需要滚动条（溢出：自动;）
页脚。高度取决于内容高度。没有滚动条。

静态页眉和页脚高度有很多例子，但我发现没有一个可以处理基于内容的高度。

我尝试过平坦的div，其位置为：absolute / relative / fixed。我已经尝试了具有display的div：table / table-row / table-cell有几种配置。我甚至尝试过使用实际的。但这些似乎都不起作用。这是许多尝试失败的尝试之一：http://jsbin.com/uveloj/15/edit

如果没有脚本，我怎么能这样做（如果可能的话，我宁愿不依赖JS），如果它甚至可能的话。

Answer 1

不使用JavaScript我不认为这是可能的。为了获得您想要的中间滚动，内容区域必须具有设定的高度。如果页眉和页脚可以动态更改，则无法更新内容区域的高度以适应滚动而不使用JavaScript。但是，如果您只想编写几行JS，这是一个非常简单的布局。我有一个很好的例子：

http://jsfiddle.net/rogerblanton/8ctJJ/

框架不应该被使用。

Answer 2

你有没有想过使用框架？

Answer 3

我很晚才发现这个帖子，但发现它很有用。

我发现在一般情况下，你需要考虑边距，边框等。你可以使用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/

HTML中的灵活标题，可滚动的正文和页脚

3 个答案: