布局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/