<分区>
<分区>
我想使用一个简单的布局,侧边栏、副边栏和主要内容,所有列的高度都需要相同。这是我感到困惑的时候,如果列为空,则列需要为最小屏幕高度,如果 1 列有元素/内容,则其他列需要具有相同的高度。
//想法
<div id="container">
needs to be min-heigth 100%
<div id="sidebar">
needs to be 40px width
</div>
<div id="subsidebar">
needs to be 200px width
</div>
<div id="content">
needs to be 100% width
<div class="some-element-is-3000">
3000px height(example)
</div>
</div>
</div>
最佳答案
尝试下面的 fiddle 。它使用 display:table;
和 display:table-cell;
:
CSS
html,body,#container{
width:100%;
height:100%;
}
#container{
display:table;
}
#sidebar,#subsidebar,#content{
border:1px solid black;
display:table-cell;
}
#sidebar{
min-width:40px;
}
#subsidebar{
min-width:200px;
}
#content{
width:100%;
}
关于html - 3列布局需要等高,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21888849/