title: Height not 100% on Container Fluid even though html and body are
body: <p>I have the following layout (I'm using Meteor): </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template name="headerFooter"&gt;
      &lt;div class="container-fluid fill-height"&gt;
          {{&gt; header}}
  
          {{&gt; UI.contentBlock}}
  
          {{&gt; footer}}
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;template name="home"&gt;
      {{#headerFooter}}
          &lt;div class="row body-film"&gt;
              &lt;div id="newsfeed" class="col-sm-offset-7 col-sm-5 block-film"&gt;
                  {{#each stories}}
                      &lt;div class="story"&gt;...&lt;/div&gt;
                  {{/each}}
              &lt;/div&gt;
          &lt;/div&gt;
      {{/headerFooter}}
  &lt;/template&gt;
  </code></pre>
  
  <p>and this (relevant) <code>css</code> backing it up:</p>
  
  <pre class="lang-css prettyprint-override"><code>html {
      height: 100%;
  }
  body {
      min-height: 100%
  } 
  .fill-height {
      height: 100%;
  }
  </code></pre>
  
  <p>The <code>html</code> and <code>body</code> elements are both behaving as expected. They fill their areas at any zoom level or size.</p>
  
  <p>However, the <code>container-fluid</code> with the <code>fill-height</code> class added isn't doing the job. It's only wrapping it's content, and not filling to the bottom. This is a problem because it is responsible for adding <code>body-film</code> and <code>block-film</code> to the page, which are just semi-transparent backgrounds to give the whole thing some color unity.</p>
  
  <p>Here are some screenshots, all with the page zoomed out so the content doesn't fill the height:</p>
  
  <p><img src="https://i.stack.imgur.com/6wXFM.png" alt="My page with nothing selected"></p>
  
  <p>Now here it is with the <code>body</code> element selected. As you can see it fills the parent just fine.</p>
  
  <p><img src="https://i.stack.imgur.com/PZ3R7.png" alt="My page with body selected"></p>
  
  <p>But the <code>container-fluid</code> doesn't.</p>
  
  <p><img src="https://i.stack.imgur.com/Ni8Qk.png" alt="My page with container selected"></p>
  
  <p>With <code>fill-height</code> I've tried both <code>height</code> and <code>min-height</code>, and they look exactly the same.</p>
  
  <p>Your help is appreciated!</p>
  
  <h3>Update</h3>
  
  <p>I've been trying every possible combination of <code>min-height</code> and <code>height</code> on these three elements, and nothing works properly.</p>
  
  <p><code>height</code> on all three works when the content is too small for the viewport, but when the content is too large for the viewport, the content block overflows out of the <code>body</code> entirely, which means the films are too short for it.</p>
  
  <p><code>min-height</code> on all three seems to me to be the most logical way to go, but it breaks when the content is too small. In this case, the <code>body</code> element doesn't stretch to fill its <code>html</code> parent.</p>
  
  <p>What's going on!!!!????? Is this a bug in the new <a href="https://github.com/meteor/meteor/wiki/Using-Blaze" rel="noreferrer">Blaze templating engine Meteor uses</a>?</p>
  
  <h3>Update</h3>
  
  <p>I've just tried <code>height: inherit</code> in my <code>fill-height</code>, and it didn't work either. I'm really at the end of my rope. This seems like it should be so simple.</p>
  
  <h3>Update</h3>
  
  <p>Alright, I've got a slight change to happen. With this <code>less</code>:</p>
  
  <pre class="lang-css prettyprint-override"><code>.fill-height {
      min-height: 100%;
      height:auto !important; 
      height: 100%; 
  }
  .body-film {
      .fill-height();
  }
  .block-film {
      .fill-height();
  }
  </code></pre>
  
  <p>The <strong>container-fluid</strong> is now full height, but not the <code>body-film</code> and <code>block-film</code> which are using the exact same mixin!!</p>
  
  <p>Here is a screenshot, showing the <code>row.body-film</code>, which <strong>should</strong> be full height, since the <code>container-fluid</code> above it is (take my word for it, the <code>container-fluid</code> is now stretched to fill the body).</p>
  
  <p><img src="https://i.stack.imgur.com/zJw1l.png" alt="The row is broken."></p>
  
  <p>Note, manually adding the <code>fill-height</code> to the <code>html</code> declaration of the row didn't change anything, it behaves identically as if it were simply receiving that through the <code>body-film</code> mixin.</p>
  
  <p>Why is it that some elements don't respond at all to all of these <code>min-height</code> demands?</p>
  
  <p>P.S., I'm using Chrome, but it <em>is</em> on a ubuntu machine, so I can't be sure if there are any inconsistencies.</p>
  
  <h2>Answer</h2>
  
  <p>The following ended up working:</p>
  
  <pre class="lang-css prettyprint-override"><code>html, body {
      height: 100%;
  }
  .container-fluid {
      height: 100%;
      overflow-y: hidden; /* don't show content that exceeds my height */
  }
  .body-film {
      height: 100%;
      overflow-y: auto; // a value of 'scroll' will force scrollbars, even if they aren't necessary. This is cleaner.
      background-color: fadeout(@studio-bar-color, @studio-body-film-trans-delta);
  }
  .block-film {
      min-height: 100%;
      overflow-y: hidden; /* don't show content that exceeds my height */
      background-color: fadeout(@studio-bar-color, @studio-block-film-trans-delta);   
  }
  </code></pre>
  
  <p>The <code>overflow</code> attribute was extremely key, and it's something didn't previously know much about. Giving a <code>scroll</code> value to the entire body (the thing that needed to be able to move up and down) was the answer, as well as giving the innermost element (<code>block-film</code>) the <code>min-height</code> to ensure it stretched itself and subsequently all of the parent elements.</p>