具有固定页脚的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