HTML 中的灵活页眉、可滚动正文和页脚答案

【问题标题】：flexible Header, scrollable body and footer in HTMLHTML 中的灵活页眉、可滚动正文和页脚
【发布时间】：2014-04-30 21:15:03
【问题描述】：

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

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

内容部分的高度应该是剩余高度，所以整个布局使用窗口的全高。内容部分可以滚动。

所以，按顺序：

标题。高度取决于内容高度。没有滚动条。
内容。高度是余数； window_height - (header_height + footer_height)。滚动条（如果需要）（溢出：自动；）
页脚。高度取决于内容高度。没有滚动条。

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

我尝试过使用 position: absolute/relative/fixed 的普通 div。我已经在几种配置中尝试了带有 display: table/table-row/table-cell 的 div。我什至尝试过使用实际的 .但这些似乎都不起作用。这是许多失败的尝试之一：http://jsbin.com/uveloj/15/edit

如果可能的话，我如何在没有脚本的情况下做到这一点（我宁愿尽可能不依赖 JS）。

【问题讨论】：

答案很简单：仅 CSS 无法做到这一点，如果您需要页眉和/或页脚的灵活高度，则不能这样做。
我也希望“浮动：底部；”存在……但事实并非如此。不知道用纯 CSS 做这件事的任何方式。

标签： html css layout height scrollable

【解决方案1】：

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

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

不应使用框架。

【讨论】：

恐怕JS确实似乎是唯一的出路。如果我想避免使用 JS 进行布局，也许我需要重新考虑 UI 布局。
也许，我不完全确定您要做什么，但使用 JavaScript 做这样简单的事情我认为不会妨碍任何用户体验。我做过无数次这样的事情，我从来没有发现任何问题。除非您出于其他原因不想使用它。
您给出的示例似乎没有处理动态更改页脚/页眉的高度。但这是一个很好的起点：jsfiddle.net/AJUCh

【解决方案2】：

您是否考虑过使用框架？

【讨论】：

我正在开发的网站使用基于 javascript 的拖放；如果不是不可能的话，框架会让这变得非常困难。

【解决方案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 固定内容的高度之外，唯一真正重要的一点是让内容的溢出样式为滚动或自动。

这是 Roger 小提琴的修改示例：

http://jsfiddle.net/nuAmG/1/

【讨论】：