html - 固定标题与下面的内容重叠

Question

我有以下 HTML，

header {
  background: #f6f6f6;
  width: 100%;
  min-height: 120px;
  position: fixed;
  z-index: 100;
  top: 0;
  padding: 5px 0;
}

<header>
  <div class="container">
    <div class="row">
      <a href="index.html">
        <img src="images/logo.png" class="img-responsive" alt="">
      </a>
    </div>
  </div>
</header>

如您所见，它是一个固定的 header ，我已将其最小高度设置为 120 像素。这使得 header 与下面的内容重叠，我通过为包装内容的 div 提供 90 像素的边距来防止这种情况。

这在较大的布局上运行良好，但当布局变小并且图像开始调整大小(由于 .img-responsive 类)时，它的高度会降低，并导致其下方出现空白空间。我可以编写媒体查询并减少 margin-top，但我想知道是否有其他方法可以防止这种情况发生。

Answer 1

您可以使用 JS 根据页面加载时的页眉大小更新边距。

$(function() {
    var headHeight = $('header').outerHeight();

    $('.welcome-home').css({'margin-top': headHeight });
});

这将获取 header 元素的总高度，然后将该大小作为 margin-top 应用到 .welcome-home。

这是一个 fiddle :https://jsfiddle.net/13n7mpbk/ 如果您尝试添加到页眉，它会在加载页面时根据需要自动增加边距。