CSS：两列布局，每列颜色不同 - 需要流体高度答案

【问题标题】：CSS: two column layout with each column a different color - need fluid heightCSS：两列布局，每列颜色不同 - 需要流体高度
【发布时间】：2013-09-19 11:15:46
【问题描述】：

所以，我有一个两列布局，似乎无法让高度像我想要的那样工作。它们都有需要增长的内容并导致页面可滚动 - 所以固定值和绝对值都出来了。但是，当在这些列（及其包含的 div）和最小高度百分比上使用相对值时（即最小为 100%，因此如果没有内容存在，它总是至少填满屏幕）。但是，它不起作用。最小高度没有被识别，除非有内容，否则我没有高度。

我意识到我可以有一个固定位置的 div 并且仅用于背景。但是，因为有时在同一页面（选项卡）中的列布局可能会发生变化，所以我宁愿不使用这种方法。

这里的任何地方都是一个小提琴：http://jsfiddle.net/hpAbc/80/

还有一些来自小提琴的示例代码：

     html, body{
    width:100%;
    height:100%
}

#container {
     width:100%;
     min-height:100%;
     padding-top:40px;
     position:relative;
 }

#nav {
     background:#222222;
     width:500px;
     height:40px;
     position:fixed;
         top:0;
    z-index:100;
}

  #content{
     background:#aaaaaa;
     width:500px;
     height:100%;
     position:relative;
 }

#main-content{
     background:#e1e1e1;
     width:300px;
     height:100%;
     float:left;
}

 #side-bar{
         background:#d1d1d1;
         width:200px;
         height:100%;
         float:left;
    }

.stuff{
         background:yellow;
         margin:10px;     
         width:50px;
         height:50px;
         position:relative;
    }

【问题讨论】：

标签： css layout height percentage

【解决方案1】：

您可以使用现有标记使用“display:table-row”和“display:table-cell”来获得您正在寻找的效果。

#content{
     background:#aaaaaa;
     width:500px;
     height:100%;
     position:relative;
     display:table-row; 
 }

 #main-content{
     background:#e1e1e1;
     width:300px;
     height:100%;
     display:table-cell;
 }

 #side-bar{
     background:#d1d1d1;
     width:200px;
     height:100%;
     vertical-align:top;
     display:table-cell;
 }

更新的小提琴： http://jsfiddle.net/PQPrW/

或者，如果您愿意更改标记，可以使用嵌套 div 来获得相同的效果。这里有一篇文章对此进行了解释：

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

【讨论】：