title: Setting containter height according to screen size - bootstrap
body: <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>header {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    background-color: #1f1f1f;
    height: 10%;
  }
  html body .container-fluid.body-content {
    position: absolute;
    top: 10%;
    bottom: 12%;
    right: 0;
    left: 0;
    overflow-y: auto;
    background-color: #171717;
    padding-top: 5vh;
  }
  .footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #1f1f1f;
    height: 12%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
    Some stuff
  &lt;/header&gt;
  &lt;div class="container-fluid body-content"&gt;
    Some more stuff
  &lt;/div&gt;
  &lt;footer class="col-md-visible-block"&gt;
    Some more other stuff
  &lt;/footer&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm using bootstrap and I'm working with a page that should have a 10% header always visible on top, containter in which the actual content is located and can be scrolled through and a footer which should be visible ONLY on <code>XS</code> and <code>SM</code> screens, so I added the <code>&lt;footer **class="col-md-visible-block"**&gt;</code>, but when the footer disappears the container-fluid still has a 12% bottom margin, how do I fix this? Again - I want the footer to be visible only on <code>XS</code> and <code>SM</code> devices, but then the container should have no bottom margin.
  Can someone help me with this?</p>