三列100%高css布局_Css_Layout_Multiple Columns

三列100%高css布局

css layout

三列100%高css布局,css,layout,multiple-columns,Css,Layout,Multiple Columns,我真的很喜欢这个布局的css。以下是我的html代码： <body> <div id="main"> <div id="left"> menu </div> <div id="middle"> </div> <div id="right"> sidebar <

我真的很喜欢这个布局的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，正文{
身高：100%；
}
身体{
保证金：0；
}
梅因先生{
显示：表格；
身高：100%；
宽度：100%；
}
.左、.中、.右{
显示：表格单元格；
背景颜色：浅灰色；
}
.左{
宽度：25%；
}
.中{
背景颜色：米色；
}
.对{
宽度：15%；
}

请参见演示：

要填充视图端口的高度，首先需要在html和body元素上设置

height:100%

将

display:table

应用于父容器，并设置

高度：100%

，由于这是一个表，该值作为最小值，因此它将填充垂直屏幕，除非内容很长，在这种情况下，表高将自动增加以包含内容

将宽度添加到左侧和右侧列，中间将填充剩余部分，因此无需进行计算

最后，对三个子元素应用

display:table cell

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