3列布局需要高度相等

Question

我想要使用简单的布局，侧栏，subsidebar和主要内容，所有列的高度必须相同。这里是当我得到stuk时，如果列是空的，则列需要为最小屏幕高度，并且如果1列包含元素/内容，则其他列需要具有相同的高度。

// HET想法

<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> 

Answer 1

尝试以下fiddle.It使用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%; 
} 

1. 拨弄所有三个div的用量少内容Fiddle

2. 拨弄内容的div超过窗口高度Fiddle