用于响应式导航栏固定底部的 HTML 边距底部

Question

我在 mi 页面末尾有这个 navbar-fixed-bottom。

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

我为 HTML 添加一个边距底部

html { margin-bottom: 100px }

.. 避免页脚覆盖我的内容。这适用于桌面分辨率，但分辨率较小，则不行。那是因为footer的img是响应式的，所以高度会降低，而不是HTML的margin-bottom。

问题是如何使 html 的 margin-bottom 具有“响应性”，具体取决于导航栏的高度。

谢谢。

Answer 1

我做到了

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