CSS 布局 100% 高度延伸到底栏

Question

我有CSS代码来做布局。我有基本的页眉面板、页脚、左面板和中心面板。我想让左面板和中心面板自动拉伸(stretch)到底部(蓝色和灰色部分一直到黑色页脚)。有什么办法吗？以下是我的代码。

谢谢你，

body {
    text-align: center;
}
.wrapper {
    position: relative;
    width: 960px;
    font-size: 0.9em;
    margin: 0 auto -20px;
    text-align: left;
}
.header {
    height: 125px;
    background-color:purple;
}
.footer {
    position: relative;
    width: 960px;
    margin: 0 auto;
    background-color:black;
}
.footer a {
    color: #fff;
    text-decoration: underline;
    border: 0;
}
.footer p {
    position: absolute;
    left: 0;
    bottom: 4px;
    width: 960px;
    padding: 0;
    color: #fff;
    font: 0.8em arial,sans-serif;
    text-align: center;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -20px; /* the bottom margin is the negative value of the footer's height */
    background-color:yellow;

}
.footer, .push {
    height: 20px; /* .push must be the same height as .footer */
}
.leftPanel{
    width:200px;
    background-color:blue;
    float:left;
    height: 100%;   
}
.centerPanel{
    width:760px;
    background-color:gray;
    float:left;
    height: 100%;   

}

dl,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,div,p,blockquote,fieldset,legend,input,select,textarea
{ margin:0; padding:0 }

     <p></p>

    <div class="wrapper"> 

        <div class="header"> 
            <h1>header</h1> 
        </div> 

        <div class="leftPanel">
            leftPanel

        </div>
        <div class="centerPanel">
            center Panel
        </div>
        <div class="push"></div> 
    </div> 

    <div class="footer"> 
        <p>footer</p> 
    </div> 
</body> 

Answer 1

这是一个非常变通的解决方案，但它是这样的:http://jsfiddle.net/Us5Cn/