三列可变宽度 CSS 页面布局，中心列展开答案

【问题标题】：Three-column variable width CSS page layout, centre column expands三列可变宽度 CSS 页面布局，中心列展开
【发布时间】：2013-10-30 23:49:04
【问题描述】：

有大量的 CSS 列布局信息，但它们似乎都依赖于至少一些具有固定宽度（或百分比）的列，其他列可以以此为基础。

我想要完成的是一个三栏布局，左右栏的宽度是可变的（它们可以有任何东西）但分别被卡在左边和右边。然后中心列应该扩展以占据它们之间的任何剩余空间。 IE。如果右栏没有任何内容，则中心栏将扩展到屏幕右侧。

这里有一个快速商店来演示：

【问题讨论】：

【解决方案1】：

如果您不介意将中心元素放在左右列之后，您可以执行以下操作：

<div class="left"></div>
<div class="right"></div>
<div class="center"></div>

只需浮动侧面元素，为中间元素添加溢出（可以是hidden 或scroll）。

.left {
  float: left;
}

.right {
  float: right;
}

.center {
  overflow: hidden;
}

这是小提琴：

【讨论】：

【解决方案2】：

您可以（ab）使用表格来帮助您进行这种布局。基本思想是将表格宽度设置为 100%（如果您愿意，也可以设置为固定值），一列宽度设置为 100%，并让 CSS 确定其他单元格需要多少空间。这是一个快速的 JSFiddle：

CSS 基本上是：

table {
    width: 100%;
}

td.b {
    /* Middle element that expands. */
    background-color: #efe8e1;
    width: 100%;
}

注意事项：

很简单！
如果您最终在中间单元格中出现任何水平溢出，则无论您将溢出设置为什么，表格都有增加表格宽度的奇怪习惯。让溢出滚动仅在中间列上正常工作是在完全痛苦和不可能之间的某个地方。您可以尝试制作 td position: relative 并在里面有 position: absolute div，但如果我没记错的话，这在标准模式下的 IE8 中不起作用。
在最新版本的 Firefox/Safari/Chrome 桌面上测试，模糊记忆表明此技巧的非滚动版本在 IE7+ 上运行良好。现实可能会有所不同。 :)
如果您正在考虑“糟糕的表格”，您也可以使用 display: table、table-row 和 table-cell 来完成此操作。
这个技巧也适用于垂直扩展！
这是一张桌子，所以列将保持相同的高度。

【讨论】：