修复了 header 阻止以下内容

Question

所以，我有一个 header 已设置为固定。我在它下面有一个滚动的项目列表，但 header 保持不变。但是，我面临的一个问题是列表被最顶部的固定 header 覆盖，阻碍了列表的第一项。

我试过将 "margin-top:55px;" 添加到包含项目列表的容器中，但是这样做隐藏了 header 后面的滚动条，看起来不太好看。我怎样才能显示 header 和列表而不被遮挡？

如有任何帮助，我们将不胜感激。

body.campaign-body {   height: 100%;  overflow-y: scroll; }
.container.campaign-header { position: fixed;
    z-index: 1000; background: #000; width: 100%; height: 55px; color:#fff;""}
.container.scroll-campaign-list { /*margin-top: 55px;*/ }

<body class="campaign-body">
  <div class="container campaign-header">
    <div class="row admin-header">
        <div class="header-title">
            <h4 class="white-txt header-name">LISTING</h4>
        </div>
    </div>
 </div>
 <div class="container scroll-campaign-list" id="campaigns-list">
    <div class="row campaigns">
        <div class="twelve columns list-items">
            <h5 class="white-txt campaign-name">Blah blah</h5>
            <p class="campaign-question grey-txt">Blah blah</p>
        </div>
    </div>
    <hr>
    <div class="row campaigns">
        <div class="twelve columns list-items">
            <h5 class="white-txt campaign-name">Blah blah</h5>
            <p class="campaign-question grey-txt">Blah blah</p>
        </div>
    </div>
    <hr><div class="row campaigns">
        <div class="twelve columns list-items">
            <h5 class="white-txt campaign-name">Blah blah</h5>
            <p class="campaign-question grey-txt">Blah blah</p>
        </div>
    </div>
    <hr><div class="row campaigns">
        <div class="twelve columns list-items">
            <h5 class="white-txt campaign-name">Blah blah</h5>
            <p class="campaign-question grey-txt">Blah blah</p>
        </div>
    </div>
    <hr><div class="row campaigns">
        <div class="twelve columns list-items">
            <h5 class="white-txt campaign-name">Blah blah</h5>
            <p class="campaign-question grey-txt">Blah blah</p>
        </div>
    </div>
    <hr><div class="row campaigns">
        <div class="twelve columns list-items">
            <h5 class="white-txt campaign-name">Blah blah</h5>
            <p class="campaign-question grey-txt">Blah blah</p>
        </div>
    </div>
    <hr><div class="row campaigns">
        <div class="twelve columns list-items">
            <h5 class="white-txt campaign-name">Blah blah</h5>
            <p class="campaign-question grey-txt">Blah blah</p>
        </div>
    </div>
    <hr><div class="row campaigns">
        <div class="twelve columns list-items">
            <h5 class="white-txt campaign-name">Blah blah</h5>
            <p class="campaign-question grey-txt">Blah blah</p>
        </div>
    </div>
    <hr><div class="row campaigns">
        <div class="twelve columns list-items">
            <h5 class="white-txt campaign-name">Blah blah</h5>
            <p class="campaign-question grey-txt">Blah blah</p>
        </div>
    </div>
    <hr>
 </div>
 </body>

Answer 1

首先，重置正文边距：

body {
  margin: 0;
}

接下来，为 scroll-campaign-list 设置 padding-top（不是 margin-top）：

.container.scroll-campaign-list {
  padding-top: 50px;
}

Answer 2

我已经添加了 "blocker" 之前这样做：

HTML:

<div class="blocker"> </div>

CSS:

/* Matches your header height */
.blocker { height: 55px; };

你所做的一切就是在 header

下方放置一个不可见的 div

Fiddle: https://jsfiddle.net/btv5bjfd/

Answer 3

我已将您的代码发布在 fiddle 中，以使其更易于使用。下面是 fiddle link 的结果，看一看，告诉我这是不是你要找的。

我已将您的页眉攻击放在页面顶部，这使我能够在列表中添加边距。

.container.campaign-header { position: fixed;
    z-index: 1000; background: #000; width: 100%; height: 55px; color:#fff; top:0;}
.container.scroll-campaign-list {margin-top: 75px; }

https://jsfiddle.net/m4fw7mk1

Answer 4

如果您希望滚动条不滚动 "through" header，您将不得不制作一个固定的内容区域来处理滚动，而不是 body 通常处理滚动。

检查 This Fiddle 了解基础知识。

确保 body

的边距和边距为零

* {
    margin:0;
    padding:0;
}

然后，确保您的 header 固定在 顶部和左侧

.campaign-header {
    top:0;
    left:0;
}

那么您的广告系列滚动列表将成为一个固定的内容容器，其高度为 100% 减去 header 的高度，位于 header 的底部并允许滚动

.scroll-campaign-list {
    position:fixed;
    top:55px;
    left:0;
    width:100%;
    height:calc(100% - 55px);
    overflow:scroll;
}

Here is a fiddle 里面有你的内容

Answer 5

我认为最好有不同的 classes。所以我删除了 .container class.

 body.campaign-body {   height: 100%;  overflow-y: scroll; }
    .campaign-header { position: fixed; top: 0;
        z-index: 1000; background: #000; width: 100%; height: 55px; color:#fff;""}
    .scroll-campaign-list { margin-top: 95px; }

 <body class="campaign-body">
      <div class="campaign-header">
        <div class="row admin-header">
            <div class="header-title">
                <h4 class="white-txt header-name">LISTING</h4>
            </div>
        </div>
     </div>
     <div class="scroll-campaign-list" id="campaigns-list">
        <div class="row campaigns">
            <div class="twelve columns list-items">
                <h5 class="white-txt campaign-name">Blah blah</h5>
                <p class="campaign-question grey-txt">Blah blah</p>
            </div>
        </div>
        <hr>
        <div class="row campaigns">
            <div class="twelve columns list-items">
                <h5 class="white-txt campaign-name">Blah blah</h5>
                <p class="campaign-question grey-txt">Blah blah</p>
            </div>
        </div>
        <hr><div class="row campaigns">
            <div class="twelve columns list-items">
                <h5 class="white-txt campaign-name">Blah blah</h5>
                <p class="campaign-question grey-txt">Blah blah</p>
            </div>
        </div>
        <hr><div class="row campaigns">
            <div class="twelve columns list-items">
                <h5 class="white-txt campaign-name">Blah blah</h5>
                <p class="campaign-question grey-txt">Blah blah</p>
            </div>
        </div>
        <hr><div class="row campaigns">
            <div class="twelve columns list-items">
                <h5 class="white-txt campaign-name">Blah blah</h5>
                <p class="campaign-question grey-txt">Blah blah</p>
            </div>
        </div>
        <hr><div class="row campaigns">
            <div class="twelve columns list-items">
                <h5 class="white-txt campaign-name">Blah blah</h5>
                <p class="campaign-question grey-txt">Blah blah</p>
            </div>
        </div>
        <hr><div class="row campaigns">
            <div class="twelve columns list-items">
                <h5 class="white-txt campaign-name">Blah blah</h5>
                <p class="campaign-question grey-txt">Blah blah</p>
            </div>
        </div>
        <hr><div class="row campaigns">
            <div class="twelve columns list-items">
                <h5 class="white-txt campaign-name">Blah blah</h5>
                <p class="campaign-question grey-txt">Blah blah</p>
            </div>
        </div>
        <hr><div class="row campaigns">
            <div class="twelve columns list-items">
                <h5 class="white-txt campaign-name">Blah blah</h5>
                <p class="campaign-question grey-txt">Blah blah</p>
            </div>
        </div>
        <hr>
     </div>
     </body>

修复了 header 阻止以下内容

fixed header blocking content below

html

css

fixed