我真的很纠结这个布局的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 表轻松完成此操作：
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/ http://jsfiddle.net/audetwebdesign/9L8wJ/
要填充视口的高度，首先需要设置height: 100%在 html 和 body 元素上。
Apply display: table到父容器并设置height: 100%，并且由于这是一个表格，因此该值作为最小值，因此除非内容很长，否则它会填满垂直屏幕，在这种情况下，表格高度会自动增加以包含内容。
添加左右列的宽度，中间将填充剩余部分，因此无需进行数学计算。
最后，申请display: table-cell到三个子元素。
如果您希望更好地控制列之间的空白，您可能需要在每个表格单元格的内容周围添加一个包装器，但这取决于您的布局和设计。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
