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

如 Fiddle 所示，导航区域并未占用所有剩余空间。我觉得我应该传达 JSFiddle 使用 Zurb Foundation。但是，我不开始使用 Zurb Foundation。因此，如果有纯 CSS 方法，我非常乐意将其作为一个选项。非常感谢您的帮助。

Answer 1

我为您的代码编写了一个小补丁，其中包含以下代码:

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

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