三列 100% 高度 css 布局答案

【问题标题】：Three columns 100 percent height css layout三列 100% 高度 css 布局
【发布时间】：2014-07-10 15:29:43
【问题描述】：

我真的被这个布局的 css 所困扰。这是我的 html 代码：

<body>
    <div id="main">
        <div id="left">
            menu
        </div>
        <div id="middle">
        </div>
        <div id="right">
            sidebar
        </div>
    </div>
</body>

我想要左、中和右三列，宽度分别为父级宽度的 25%、60% 和 15%，并且全部扩展到其父级（主）的 100% 高度。同时，我希望主 div 具有浏览器窗口的最小高度和其子项的最大高度。

【问题讨论】：

标签： css layout multiple-columns

【解决方案1】：

您可以使用 CSS 表格轻松完成：

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.main {
    display: table;
    height: 100%;
    width: 100%;
}
.left, .middle, .right {
    display: table-cell;
    background-color: lightgray;
}
.left {
    width: 25%;
}
.middle {
    background-color: beige;
}
.right {
    width: 15%;
}

查看演示：http://jsfiddle.net/audetwebdesign/9L8wJ/

要填充视口的高度，首先需要在html和body元素上设置height: 100%。

将display: table应用到父容器并设置height: 100%，由于这是一个表格，这个值作为一个最小值，所以除非内容很长，否则它会填满竖屏，并且在这个情况下，表格高度会自动增加以包含内容。

为左右列添加宽度，中间将填充其余部分，因此无需进行数学运算。

最后，将display: table-cell 应用于三个子元素。

您可能希望在每个表格单元格的内容周围添加一个包装器，以便更好地控制列之间的空白，但这取决于您的布局和设计。

【讨论】：