title: Responsive CSS with columns set to 100% height
body: <p>Setting up a vertical column page layout and wondering what your thoughts are on the best approach to do so in html/css. Below is some html and css starter code, but I'm looking for some help with getting the columns to line-up side by side with 100% height? Also this is a full screen (width) responsive fluid layout, with a fixed width on the left nav column.</p>
  
  <p>In a nutshell... I'm coding <a href="http://d13yacurqjgara.cloudfront.net/users/1972/screenshots/1323883/attachments/186271/discuss_144dpi.png" rel="nofollow noreferrer">this</a> with the left columns falling off the smaller the browser windows get.</p>
  
  <p><strong>Fullscreen view</strong></p>
  
  <p><img src="https://i.stack.imgur.com/A9Jzt.png" alt="fullscreen view"></p>
  
  <p><strong>Portrait view</strong></p>
  
  <p><img src="https://i.stack.imgur.com/9EpE3.png" alt="**portrait view**"></p>
  
  <p><strong>Phone view</strong></p>
  
  <p><img src="https://i.stack.imgur.com/HcdPA.png" alt="phone view"></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body&gt;
  &lt;nav role="navigation"&gt;
      nav
  &lt;/nav&gt;
  &lt;main role="site"&gt;
      &lt;article role="nav"&gt;
          list
      &lt;/article&gt;
      &lt;article role="main"&gt;
          content
      &lt;/article&gt;
  &lt;/main&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>nav[role=navigation]{
  background-color: #aaa;
  height: 100%;
  width: 18em;
  }
  main{
  width: 100%;
  }
  article[role=nav]{
  background-color: #ddd;
  height: 100%;
  }
  article[role=main]{
  background-color: #efefef;
  height: 100%;
  }
  </code></pre>