title: Fix div at top and bottom
body: <p>I'm trying to finish a page using bootstrap, but i'm stuck in a simple thing (unfortunately)</p>
  
  <p>Well, I have this code here - <a href="http://jsfiddle.net/tofanelli/1npw7x62/2/" rel="nofollow">http://jsfiddle.net/tofanelli/1npw7x62/2/</a> - and I want to make the H3 always be on top, and the pink area always goes to bottom, but still "inside" of green area, regardless how many content is in the page. </p>
  
  <p>So far, when I have just 2 or 3 text lines, all the content stay on the middle of the page in mobile view. How to avoid this and make the title stays on top and pink area on bottom?</p>
  
  <p>You may say "just use position 'fixed' or 'absolute' or 'sticky'... I already tried all these options, but none of them really worked as I want to.</p>
  
  <p>Cheers =)</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
  &lt;div class="row"&gt;
  &lt;div class="col-md-6 blue nopad" style="height:100vh;"&gt;
  &lt;img src="http://lorempixel.com/140/140/" /&gt;&lt;/div&gt;
  &lt;div class="col-md-6 green"&gt;
  &lt;div class="col-md-12"&gt;
  &lt;h3&gt;h3. Lorem ipsum dolor sit amet.&lt;/h3&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, &lt;strong&gt;consectetur adipiscing elit&lt;/strong&gt;. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. &lt;em&gt;Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.&lt;/em&gt; Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. &lt;small&gt;Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.&lt;/small&gt;&lt;/p&gt;&lt;/div&gt;
  &lt;div class="row"&gt;
  &lt;div class="col-md-12 pink"&gt;&lt;img src="http://lorempixel.com/140/140/" /&gt;        &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  .blue{
      background: blue;
  }
  
  .green {
      background: green;
      height: 100vh;
  }
  .pink {
      background: pink;
  }
  </code></pre>