CSS布局100％的高度延伸到底部吧

Question

我有CSS代码做布局。我有基本的页眉面板，页脚，左侧面板和中央面板。我想让左侧面板和中央面板自动拉伸到底部（蓝色和灰色部分一直到黑色底部）。有没有办法做到这一点？ 以下是我的代码。

谢谢你，

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 } 

 

    <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

这是一个非常工作aroundish解决方案，但这里有云：http://jsfiddle.net/Us5Cn/

Answer 2

获得元素可拉伸至视口是的高度的比例部分的唯一方法将它们锚定在底部。

See here查看具体信息。