title: Responsive and Full-height sidebar
body: <h2>The idea</h2>
  
  <p>Just like facebook modals, but this one have to be responsive.</p>
  
  <p>In this example: <a href="http://jsfiddle.net/Frondor/ufby12n7/5/embedded/result/" rel="nofollow">http://jsfiddle.net/Frondor/ufby12n7/5/embedded/result/</a> (resize/adjust the result's window to see the <em>responsibility</em>).</p>
  
  <p>I'm placing a description next to a video, the desc. is inside the sidebar, but it's too short and <strong>when the window is wide enough</strong>, sidebar (<code>.sideview</code>) have to hit the bottom of the whole modal anyway.</p>
  
  <p>So I've absolute positioned it and used the "<code>top:0; right:0; bottom:0;</code>" trick: <strong><a href="http://jsfiddle.net/Frondor/ufby12n7/8/" rel="nofollow">http://jsfiddle.net/Frondor/ufby12n7/8/</a></strong></p>
  
  <p>It worked like a charm, but when the window's size goes smaller, the <code>.sideview</code>is overlapping the video, instead of moving to its bottom like happened in the <a href="http://jsfiddle.net/Frondor/ufby12n7/5/" rel="nofollow">previous version</a>.</p>
  
  <h2>The code</h2>
  
  <p>I'm using bootstrap grid system like this:</p>
  
  <pre><code>&lt;div class="mmcontainer row"&gt;
  
          &lt;div class="viewer col-sm-8"&gt;
                &lt;!-- here goes video --&gt;
          &lt;/div&gt;
  
          &lt;div class="sideview col-sm-4"&gt;
                &lt;!-- here goes the video desc.--&gt;
          &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.mmcontainer {
      background: #333;
      position: relative;
      width: auto;
      margin: 30px;
  }
  .viewer {
      color: #666;
      text-shadow: 1px 1px #000;
      padding:10px;
  }
  .sideview {
      background: #ccc;
      text-shadow: 1px 1px #EEE;
      padding: 10px;
      height: 100%;
      min-height: 250px; 
      max-height: 400px;
      position: absolute; /* here's the trick */
      top: 0;
      right: 0;
      bottom: 0;
      overflow-y: auto; /* because scrollbars are awesome */
  }
  </code></pre>
  
  <h2>The "behavior" I want to achieve:</h2>
  
  <ul>
  <li><p>When the description is too short, and the window wide enough: Just
  continue <code>.sideview</code> background until modal's bottom.</p></li>
  <li><p>When the description is too long, and the window wide enough: there
  should be a vertical scrollbar in the <code>.sideview</code>.</p></li>
  <li><p>When the window is small enough, the <code>.sideview</code> should be placed
  just below the <code>.viewer</code>.</p></li>
  </ul>
  
  <p>This is driving me crazy! So, if there's somebody who knows how to deal with this kind of things, It'll be really appreciated :)</p>