title: Layout CSS Panel
body: <p>I have a HTML page that needs to take up the full height and width of the screen. In short, I'm trying to make it look like the following:</p>
  
  <pre><code>--------------------------------------------------------+
  |             |                                         |
  | HELLO!      |  MAIN CONTENT WILL GO HERE              |
  |             |                                         |
  | +---------+ |                                         |
  | | nav 1   | |                                         |
  | | nav 2   | |                                         |
  | | nav 3   | |                                         |
  | |         | |                                         |
  | |         | |                                         |
  | |         | |                                         |
  | +---------+ |                                         | 
  |             |                                         |
  |             |                                         |
  | Footer Text |                                         |
  +-------------+-----------------------------------------+
  </code></pre>
  
  <p>My problem is , I can't get the Footer Text to align against the bottom. At the same time, I can't get the nav 1... navx items to fill the remaining space between the HELLO text and the footer text. Basically, I just need the nav area to fill all remaining space. If there are more items then space, I want to show a scroll bar. Currently, I'm trying the following (as shown in this <a href="http://jsfiddle.net/83czN/" rel="nofollow">JSFiddle</a>):</p>
  
  <pre><code>&lt;div style='height:100%; padding:0; margin:0; background-color:silver;'&gt;
      &lt;div class="row"&gt;
          &lt;div class="small-4 columns"&gt;
              &lt;div class="row"&gt;HELLO!&lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;div class="small-12 columns"&gt;
                      &lt;div style="overflow-y:scroll;"&gt;
                        &lt;ul class="side-nav"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Link 4&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;                    
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;Footer Text&lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="small-8 columns"&gt;
              MAIN CONTENT GOES HERE
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As the Fiddle shows, the nav are doesn't take up all of the remaining space. I feel I should communicate that the JSFiddle uses Zurb Foundation. However, I am <strong><em>not</em></strong> set on using Zurb Foundation. So if there is a pure CSS approach, I'm perfectly content with that as an option. Thank you so much for your help.</p>