html - 带滚动中心的 HTML 完整页面布局

Question

我需要生成如下 HTML 布局:

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

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

有谁知道这在实践中有效的例子吗？该解决方案预计可以合理地跨浏览器，但不必涵盖所有极端情况。

谢谢， 菲尔

更新 我找到了一个解决方案并将其作为答案发布在这里。

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 了解更多详细信息。