Question

所以，我有一个两列的布局，似乎无法像我想的那样工作。这些都具有需要增长的内容并使页面可滚动 - 因此固定和绝对值都不存在。但是，当在这些列（及其包含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;
    }

Answer 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

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

1 个答案: