三列100％高的CSS布局 [英] Three columns 100 percent height css layout
问题描述
对于这种布局，我真的很讨厌CSS.这是我的html代码:
I am really stuck with the css for this layout. Here is my html code :
<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具有最小的浏览器窗口高度和最大的子窗口高度.
I want three columns left, middle and right with the width of 25%, 60%, and 15% percent width of the parent and all expand to the 100 percent height of their parent (main). in the mean time I want the main div to have a minimum height of the browser window and maximum height of its children.
推荐答案
您可以使用CSS表轻松完成此操作:
You can do it easily using CSS tables:
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/
See demo at: http://jsfiddle.net/audetwebdesign/9L8wJ/
要填充视口的高度，首先需要在html和body元素上设置height: 100%.
To fill the height of the view port, you first need to set height: 100% on the html and body elements.
将display: table应用于父容器并设置height: 100%，由于这是一个表，因此该值充当最小值，因此除非内容很长，否则它将填充垂直屏幕.在这种情况下，表格高度会自动增加以包含内容.
Apply display: table to the parent container and set the height: 100%, and since this is a table, this value acts as a minimum value, so it will fill the vertical screen unless the content is very long, and in this case, the table height will automatically increase to contain the content.
在左右列中增加宽度，中间将填充其余部分，因此无需进行数学计算.
Add widths to the left and right column, the middle will fill the remainder so no need to do the math.
最后，将display: table-cell应用于三个子元素.
Finally, apply display: table-cell to the three child elements.
您可能希望在每个表单元格的内容周围添加包装器，以便更好地控制列之间的空白，但这取决于您的布局和设计.
You may want to add a wrapper around the content in each table cell is you want better control of the white space between columns, but it depends on you layout and design.
这篇关于三列100％高的CSS布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
