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查看具體信息。