佈局與標籤的基地，頁腳

Question

這小提琴的頂部垂直條...

http://jsfiddle.net/jeljeljel/5BSva/6/

顯示了一個佈局，我想實現。我希望從選項卡底部的垂直條延伸到頁腳。我認爲我已經修復了這個問題，但是當頁面內容超過垂直高度時，垂直欄不會調整。

有沒有辦法改變這個小提琴，使垂直酒吧總是延伸到頁腳？

HTML

<div class="wrapper"> 
    <div class="header"> 
     HEADER 
    </div> 
    <div class="body"> 


     <ul class="nav nav-tabs" id="tabcontrol"> 
      <li class="active"><a href="#home" data-toggle="tab">Home</a></li> 
     </ul> 

     <div class="tab-content"> 
      <div class="tab-pane active" id="home" style=""> 
       <div class="navigation" style=""> 
        navigation<br /> 
        navigation<br /> 
        navigation<br /> 
       </div> 

       <div class="content"> 
        <table> 
         <tr> 
          <td>some information</td> 
         </tr> 
         <tr> 
          <td>some information</td> 
         </tr> 
         <tr> 
          <td>some information</td> 
         </tr> 
         <tr> 
          <td>some information</td> 
         </tr> 
         <tr> 
          <td>some information</td> 
         </tr> 
         <tr> 
          <td>some information</td> 
         </tr> 
         <tr> 
          <td>some information</td> 
         </tr> 
         <tr> 
          <td>some information</td> 
         </tr> 
         <tr> 
          <td>some information</td> 
         </tr> 
         <tr> 
          <td>some information</td> 
         </tr> 
         <tr> 
          <td>some information</td> 
         </tr> 
         <tr> 
          <td>some information</td> 
         </tr> 
         <tr> 
          <td>some information</td> 
         </tr> 
         <tr> 
          <td>some information</td> 
         </tr> 
         <tr> 
          <td>some information</td> 
         </tr> 
         <tr> 
          <td>some information</td> 
         </tr> 
         <tr> 
          <td>some information</td> 
         </tr> 
         <tr> 
          <td>some information</td> 
         </tr> 
         <tr> 
          <td>some information</td> 
         </tr> 
         <tr> 
          <td>some information</td> 
         </tr> 
         <tr> 
          <td>some information</td> 
         </tr> 
         <tr> 
          <td>some information</td> 
         </tr> 
         <tr> 
          <td>some information</td> 
         </tr> 
         <tr> 
          <td>some information</td> 
         </tr> 
         <tr> 
          <td>some information</td> 
         </tr> 
         <tr> 
          <td>some information</td> 
         </tr> 
         <tr> 
          <td>some information</td> 
         </tr> 
         <tr> 
          <td>some information</td> 
         </tr> 
         <tr> 
          <td>some information</td> 
         </tr> 
         <tr> 
          <td>some information</td> 
         </tr> 
        </table> 
       </div> 
      </div> 
     </div> 


    </div> 
    <div class="push"> 
    </div> 
</div> 
<div class="footer center"> 
    <div style="border-bottom: 2px solid rgb(174, 174, 201); background-color: #fff;"></div> 
    <div> 
     FOOTER 
    </div> 
</div> 

CSS

 .body { 
      border: 1px solid rgb(174, 174, 201); 
      border-top: 5px solid rgb(174, 174, 201); 
      border-bottom: 5px solid rgb(174, 174, 201); 
      border-left: 2px solid rgb(174, 174, 201); 
      border-right: 2px solid rgb(174, 174, 201); 
      padding-bottom: 1000px; 
      margin-bottom: -1000px; 
     } 

     /* Sticky Footer by Ryan Fait (http://ryanfait.com/) */ 
     * { 
      margin: 0; 
     } 

     html, body { 
      height: 100%; 

     } 

     .wrapper { 
      min-height: 100%; 
      height: auto !important; 
      height: 100%; 
      margin: 0 auto -50px auto; /* the bottom margin is the negative value of the footer's height */ 
      overflow: hidden; 
     } 

     .footer { 
      height: 50px; 
      background-color: red; 
     } 

     .footer, .push { 
      height: 50px; /* .push must be the same height as .footer */ 
      clear: both; 
     } 

     form { 
      height: 100%; 
     } 
     /* Sticky Footer by Ryan Fait (http://ryanfait.com/) */ 

     .navigation { 
      float: left; 
      width: 150px; 
      border-right: 3px solid rgb(174, 174, 201); 
      padding-top: 10px; 
      white-space: nowrap; 
    position:absolute; 

bottom:50px; 
    top:65px; 
     } 

     .content { 
      padding-top: 10px; 
    margin-left:160px; 
     } 

     .nav { 
      margin-bottom: 0px; 
     } 

Answer 1

CSS的最小量，你需要做到這一點是增加position: relative到.tab-pane然後調整收入和自下而上.navigation的值。這是後者的絕對定位需要有什麼作用。

請看這裏：http://jsfiddle.net/5BSva/11/