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