三列100％高度的CSS布局

我真的坚持与这种布局的CSS。这里是我的html代码：三列100％高度的CSS布局

<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具有浏览器窗口的最小高度和子节点的最大高度。

来源

2014-07-10 Meysam Feghhi

您可以轻松地使用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应用于三个子元素。

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

来源

2014-07-10 15:45:35

三列100％高度的CSS布局

回答

相关问题