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

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>

你可以看到它是一个固定的标题，我给它的最小高度为120px。这使得标题与下面的内容重叠，并且通过给包含内容的div提供90px的上边距来阻止它。

这适用于较大的布局，但是当布局变小并且图像开始重新调整大小时（由于.img响应类），其高度会降低，并导致其下方出现空白区域。我可以写一个媒体查询并减少margin-top，但我想知道是否还有其他方法可以防止这种情况发生。

Answer 1

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

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

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

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

这是一个小提琴：https://jsfiddle.net/13n7mpbk/ 如果您尝试添加标题，它将在页面加载时根据需要自动增加边距。