用css設計css流體/固定佈局而不使用表格

Question

如何在不使用任何表格的情況下設計下列布局？

我已經嘗試過，但無法獲得3箇中央div元素的高度，以100％的身高。

任何幫助，將不勝感激。提前致謝！

Answer 1

一個非常有用和簡單的解決方案，我使用三個相同高度的列如下：製作一個定位爲relative和height:100%的包裝。然後所有的孩子被定位absolute和加入height:100%，將採取你的包裝的整個高度。由於定位它們absolute會將它移動到屏幕的左上角，因此您可以相應地使用margin-left將它移動到瀏覽器的右側。

HTML

<div id="wrapper"> 
    <div id="first" class="column"></div> 
    <div id="second" class="column"></div> 
    <div id="third" class="column"></div> 
    </div> 

CSS

body,html,#wrapper,.column {height:100%;} 
    #wrapper {position:relative;} 
    .column {position:absolute;border:1px solid black;width:33.3%} 
    #second {margin-left:33.3%} 
    #third {margin-left:66.6%} 

演示：http://jsbin.com/igoso4

我已經在Firefox測試上述方法中，鉻，動物園，即7,8- +，歌劇。