title: Bootstrap - Grid system - Fixed height issues
body: <p>I building a web application using the Bootstrap grid system as my layout. So far everything was working great but got into this issue where I have a div row that has a large image (width 1280px by height 150 px) and when you resize the page the image overlaps over divs. </p>
  
  <p>To fix that I put a fixed height (height 150px) on my div and it stopped resizing and overlapping but I introduced a new problem. This nows throws off my layout and adds a vertical scrolling bar and I need my web app to fit the entire page only.</p>
  
  <p>I was thinking of maybe adding a overflow: hidden to my CSS but seems a bit hacky to me. Just looking for advice and maybe a different approach to my layout. It seems that Bootstrap dosent play nice with fixed heights. </p>
  
  <p><a href="https://jsfiddle.net/DTcHh/9847/" rel="nofollow">https://jsfiddle.net/DTcHh/9847/</a></p>
  
  <pre><code>&lt;div class="container-fluid row-fluid" style="height: 100%;"&gt;
      &lt;div class="row grey" style="height: 10%;"&gt; title of the website here &lt;/div&gt;
      &lt;div class="row yellow" style="height: 150px; text-align: center;"&gt; 
          &lt;img width="1280px" height="150px" src="https://41.media.tumblr.com/tumblr_m4n498M3NQ1r9f8g8o1_1280.png" /&gt;
      &lt;/div&gt;
      &lt;div class="row grey" style="height: 60%;"&gt; main content area &lt;/div&gt;
      &lt;div class="row grey" style="height: 10%;"&gt; footer area &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>