Mey*_*hhi 4 css layout multiple-columns
我真的被这个布局的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具有浏览器窗口的最小高度和子节点的最大高度.
Mar*_*det 13
您可以使用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/
要填充视口的高度,首先需要设置height: 100%html和body元素.
应用于display: table父容器并设置height: 100%,因为这是一个表,此值作为最小值,因此它将填充垂直屏幕,除非内容非常长,在这种情况下,表高度将自动增加到包含内容.
向左右列添加宽度,中间将填充剩余部分,因此无需进行数学运算.
最后,适用display: table-cell于三个子元素.
您可能希望在每个表格单元格中添加一个包装器,您希望更好地控制列之间的空白区域,但这取决于您的布局和设计.