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

【问题标题】：Fixed header overlaps the content below固定标题与下面的内容重叠
【发布时间】：2016-02-19 17:37:36
【问题描述】：

我有以下 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>

如您所见，它是一个固定的标题，我给它的最小高度为 120 像素。这使得标题与下面的内容重叠，我通过为包装内容的 div 提供 90px 的 margin-top 来防止这种情况发生。

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

【问题讨论】：

欢迎来到 CSS 和固定定位的精彩世界。是的，它从根本上被破坏了。 CSS 是在响应性不是一个概念的时代设计的。响应性是 CSS 刚刚开始适应的东西。问题真正解决还需要几年时间。有一些解决方法和技巧，涉及将标题放置两次，一次是固定的，一次是作为滚动 div 的一部分“在”固定部分“后面”。
请不要介意创建jsfiddle.net
尝试使用其他单位作为边距，例如%、em 或rem。还有一些@media 来帮忙。
@RoySonasish jsfiddle 给了我一些问题，所以我创建了一个 codepen codepen.io/vbcda/pen/QyRMpj。我再次使用 margin-top 使部分内容可见。它可以在更宽的屏幕上使用，但只要 img 响应类在其下方的空白空间中启动。
所以你已经降低了响应式标题的高度？

标签： html css twitter-bootstrap twitter-bootstrap-3 responsive-design

【解决方案1】：

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

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

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

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

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

【讨论】：