HTML 响应式 navbar-fixed-bottom 的 margin-bottom

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 }

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

问题是如何根据导航栏高度使 html 的 margin-bottom "responsive"。

谢谢。

Answer 1

我用

做到了

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

HTML 响应式 navbar-fixed-bottom 的 margin-bottom

HTML margin-bottom for responsive navbar-fixed-bottom

html

css

footer

navbar

bootstrap-4