具有固定頁腳的CSS兩列滿高？

我想創建一個4 div的佈局;一個頁眉，一個頁腳和一個左右欄。具有固定頁腳的CSS兩列滿高？

標題應該在頂部，填充整個寬度，併爲50px高。頁腳應固定在窗口底部，也是50px高。左側和右側div應該彼此相鄰，並填充頁眉底部和頁腳頂部之間的所有空間（垂直）。

這似乎應該是非常簡單的，但我已經花了過去5個小時對此，並不能讓它正常工作。

我能做的最好是這樣的：

<body> 
    <div class="BodyWrapper"> 
    <div id="Header"></div><!-- End Header -->   
    <div class="Left LeftColumn">asds</div> 
    <div class="Right RightColumn"></div>   
    <div class="push"></div>   
    </div><!-- End Body --> 
    <div id="Footer"></div><!-- End Footer -->

CSS：

*{ 
    padding:0px; 
    margin:0px; 
    } 

    html, body { 
    height:100%; 
    font-family:verdana; 
    font-size:11px; 
    color:#646464; 
    } 

    .BodyWrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -50px; 
    overflow:hidden; 
    } 

    #Footer, .push { 
    height: 4em; 
    } 

    .Left { 
    float:left; 
    } 

    .Right { 
    float:right; 
    } 

    .LeftColumn { 
    width:20%; 
    height:100%; 
    margin-bottom:-52px; 
    border:1px solid gray; 
    background:red; 
    } 

    .RightColumn { 
    width:70%; 
    height:100%; 
    margin-bottom:-52px; 
    border:1px solid gray; 
    background:green; 
    } 


    #Header { 
    height:49px; 
    background:blue; 
    border-bottom:1px solid black; 
    } 

    #Footer { 
    height:49px; 
    background:blue; 
    border-top:1px solid black; 
    }

這樣做的結果是幾乎我想要什麼，但左，右列一直走到頁面的底部並覆蓋頁腳。我真正想要的是給他們一個100％減去50px的高度。有什麼建議麼？或者這個有效的例子？

來源

2011-05-03 Nick

我建議你檢查出http://matthewjamestaylor.com/blog/holy-grail-liquid-layout-no-quirks-mode – armonge 2011-05-03 20:53:51

這是一個很好的資源，但我沒有看到一個用固定頁腳。 – Nick 2011-05-04 13:55:14

實際上存在http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page – armonge 2011-05-04 13:57:28

我知道，我知道 - 表是邪惡的。但他們在這裏奇妙地工作！所有的高度和寬度問題都由表本身的實施來完成。

<table> 
<tr id="header"> 
<td>Header Stuff</td> 
</tr> 
<tr id="cols"> 
<td style="width:20%" id="leftcol">Left col Stuff</td> 
<td style="width:80%" id="rightcol">Right Col Stuff</td> 
</tr> 
<tr id="footer"> 
<td>Copyright Whatever footer stuff</td> 
</tr> 
</table>

來源

2011-05-03 16:39:06

到目前爲止，這看起來像是最好的選擇。由於表格可能是「錯誤的」，這似乎是「正常工作」。我會再等一會兒，看看有人有純粹的div/css解決方案，但如果沒有，我會接受這個答案，並與它一起去！ – Nick 2011-05-03 18:08:33

@Nick謝謝。我是佈局桌子的忠實粉絲，當人們抨擊它的時候，它讓我很難受。很高興你能欣賞它。 – 2011-05-03 18:11:24

@ Downvoter謹慎解釋？我不介意失去代表，但我想知道爲什麼我可以改善。 – 2011-05-03 22:10:24