Search code examples
htmlcssnavbarfooterbootstrap-4

HTML margin-bottom for responsive navbar-fixed-bottom

I have this navbar-fixed-bottom at the end of mi page.

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
  <div class="container">
    <img src="images/banner2.jpg" class="img-responsive">
  </div>
</div>

I add a margin bottom for the HTML

html { margin-bottom: 100px }

.. to avoid the footer covers my content. That works fine for desktop resolution, but with smaller resolution, not. Thats because the img of the footer is responsive, so the height decrease, but not the margin-bottom of the HTML.

The question is how to make the margin-bottom of the html "responsive", depending on the navbar height.

Thanks.

Solution

  • I made it with 

    @media (max-width: 640px) {/
  html { margin-bottom: 50px }
}