0

所以，我有一个两列布局，似乎无法让高度像我想要的那样工作。它们都有需要增长的内容并导致页面可滚动 - 所以固定值和绝对值都出来了。但是，当在这些列（及其包含的 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;
    }
4

1 回答 1

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

于 2013-09-19T03:15:46.167 回答