Question

我真的被这个布局的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具有浏览器窗口的最小高度和子节点的最大高度。

Answer 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应用于三个子元素。

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

三列100％高度css布局

1 个答案: