Setting containter height according to screen size - bootstrap
<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>