因此，我有一个已设置为固定的 header 。我在它下面有一个滚动的元素列表，但标题保持不变。但是，我面临的一个问题是列表被最顶部的固定标题覆盖，阻碍了列表的第一项。
我试过添加“margin-top:55px;”到包含元素列表的容器，但这样做会隐藏标题后面的滚动条，看起来不太好看。如何在不被遮挡的情况下显示标题和列表？
如有任何帮助，我们将不胜感激。
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>
最佳答案
首先，重置正文边距:
body {
margin: 0;
}
接下来，为 scroll-campaign-list 设置 padding-top(不是 margin-top):
.container.scroll-campaign-list {
padding-top: 50px;
}
关于html - 固定 header 阻止下面的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37392943/