佈局CSS面板

Question

我有一個HTML頁面，需要佔用屏幕的全部高度和寬度。總之，我試圖讓它看起來像下面這樣：

--------------------------------------------------------+ 
|    |           | 
| HELLO!  | MAIN CONTENT WILL GO HERE    | 
|    |           | 
| +---------+ |           | 
| | nav 1 | |           | 
| | nav 2 | |           | 
| | nav 3 | |           | 
| |   | |           | 
| |   | |           | 
| |   | |           | 
| +---------+ |           | 
|    |           | 
|    |           | 
| Footer Text |           | 
+-------------+-----------------------------------------+ 

我的問題是，我無法獲得頁腳文本與底部對齊。同時，我無法獲取nav 1 ... navx項目來填充HELLO文本和頁腳文本之間的剩餘空間。基本上，我只需要導航區來填充所有剩餘的空間。如果有更多的項目，然後空間，我想顯示一個滾動條。目前，我嘗試以下（如本JSFiddle）：

<div style='height:100%; padding:0; margin:0; background-color:silver;'> 
    <div class="row"> 
     <div class="small-4 columns"> 
      <div class="row">HELLO!</div> 
      <div class="row"> 
       <div class="small-12 columns"> 
        <div style="overflow-y:scroll;"> 
         <ul class="side-nav"> 
         <li><a href="#">Link 1</a></li> 
         <li><a href="#">Link 2</a></li> 
         <li><a href="#">Link 3</a></li> 
         <li><a href="#">Link 4</a></li> 
         </ul>      
        </div> 
       </div> 
      </div> 
      <div class="row">Footer Text</div> 
     </div> 

     <div class="small-8 columns"> 
      MAIN CONTENT GOES HERE 
     </div> 
    </div> 
</div> 

隨着小提琴所示，導航是不佔用所有剩餘空間。我覺得我應該告訴JSFiddle使用Zurb基金會。但是，我是而不是設置使用Zurb基金會。所以如果有純粹的CSS方法，我完全滿意這個選擇。非常感謝你的幫助。

Answer 1

我寫了一個小補丁，你的代碼包含下面的代碼：

.small-4 .row { 
    display:table-row; 
} 

http://jsfiddle.net/83czN/1/