2

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

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

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

所以，按顺序：

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

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

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

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

4

3 回答 3

1

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

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

不应使用框架。

于 2011-12-27T13:27:13.640 回答
1

您是否考虑过使用框架？

于 2011-12-27T13:35:07.023 回答
1

我很晚才遇到这个线程，但发现它很有用。

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

于 2014-04-30T13:15:03.697 回答