带有滚动中心的HTML全页面布局

Question

我需要按如下方式生成HTML布局：

1. 页面应该流动以占用浏览器窗口中的可用空间
2. 它应该有一个固定的高度页眉和页脚
3. 中心区域应占据剩余高度
4. 中心区域分为三列。如果内容超出可用区域，则每个列应该可以独立滚动。

我已经使用高度100％的表（最终进行了一些调整），顶部和底部单元具有固定高度。这使得中心区域占据了剩余的空间。该区域包含另一个包含三列的表。每个单元格包含一个div，其高度和宽度设置为100％，溢出设置为auto。看起来应该可以工作，但是多余的内容只会导致主表扩展其高度，以便整个页面变得可滚动。

有没有人知道这在实践中有哪些例子？该解决方案应该是合理地跨浏览器，但不必涵盖每个角落的情况。

谢谢， 菲尔

更新 我想出了一个解决方案并在此处将其作为答案发布。

Answer 1

注意：我在这里假设HTML5和CSS3，但保留了适用于大多数浏览器的属性。 HTML5可以轻松地与HTML 4.01交换。

---

要创建所需的布局，我们从一些基本的HTML开始：

<div id="wrapper">
  <header> Header </header>
  <div id="content">
    <section id="left"> Left </section>
    <section id="center"> Center </section>
    <section id="right"> Right </section>
  </div>
  <footer> Footer </footer>
</div>

困难在于根据您的需求设计造型。首先设置尽可能高的100％高度，以及合适的溢出值，我们可以获得非常接近您想要的东西：

html, body { height: 100%; margin: 0; padding: 0; }
#wrapper { height: 100%; }
header, footer { height: 50px; }
#content { height: 100%; overflow: hidden; }
section { float: left; overflow: auto; height: 100%; }
#left, #right { width: 100px; }
#center { width: 300px; }

不幸的是，这使得布局正好100px（页脚和页眉的组合高度）太高了。为了解决这个问题，我们必须将#content的高度减少相同的量，但标准的盒子模型不允许这样做。输入box-sizing（is supported by all major browsers except IE7），我们可以使用它来更改正在使用的盒子模型。使用border-box框模型，填充包含在高度中，因此我们可以从#content“移除”必要的高度：

#content { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; padding: 50px 0; margin: -50px 0; }

有关详细信息，另请参阅this JSfiddle demo和the full screen result。

Answer 2

这种布局有几个例子可供选择。其中最好的是马修·莱文的“圣杯”，complete with tutorial。

您会注意到此布局不会将页脚固定在屏幕底部。您可以通过将body（或无所不包的div）高度设置为100％并使用overflow:hidden来实现此目的，但这会引入潜在的可用性问题。您可能会发现最好根据需要将页面扩展到正确的高度。

Answer 3

我想出了一个解决方案，它并不优雅，但确实有效。我创建了一个设置为100％高度的表。然后我添加了一个在加载时执行并调整大小的函数。这将获得窗口的高度并从中减去页眉和页脚的高度，然后将中心区域中div的高度设置为剩余高度。主要的困难是提出了一个准确的窗口高度，通过各种谷歌搜索，我想出了以下似乎工作正常：

function getWindowHeight() {
   var height = 0;
   var body = window.document.body;

   if (window.innerHeight) {
        height = window.innerHeight;
   } else if (body.parentElement.clientHeight) {
       height = body.parentElement.clientHeight;
   } else if (body && body.clientHeight) {
       height = body.clientHeight;
   }
   return height;

}