修复下面的标题阻止内容
[英]fixed header blocking content below
问题描述
So, I have a header which I have set as fixed. 
因此，我有一个已设置为固定的标头。 I have a list of items underneath it which scroll, but the header stays intact. 我在其下面有一个滚动项列表，但标题保持不变。 However, one of the issues I'm facing is that the list is covered by the fixed header at the very top, obstructing the first item of the list. 但是，我面临的问题之一是列表被最顶部的固定标头覆盖，从而阻碍了列表的第一项。
I've tried adding "margin-top:55px;" 我尝试添加“ margin-top：55px;” to the container holding the list of items, but doing so hides the scrollbar behind the header, which is not very nice to look at. 到包含项目列表的容器中，但是这样做会将滚动条隐藏在标题后面，这看起来不太好。 How could I display the header and list without it being obstructed? 如何显示标题和列表而不会被阻塞？
Any help would be most appreciated. 非常感激任何的帮助。
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>
5 个解决方案
解决方案1
1 已采纳 2016-05-23 14:03:07
First, reset body margin: 首先，重新设置页边距：
body {
margin: 0;
}
Next, set padding-top (not margin-top) for scroll-campaign-list : 接下来，为scroll-campaign-list设置padding-top（而不是margin-top）：
.container.scroll-campaign-list {
padding-top: 50px;
}
解决方案2
0 2016-05-23 14:04:09
I have added a "blocker" do this before: 我之前添加了“阻止程序”：
HTML: HTML：
<div class="blocker"> </div>
CSS: CSS：
/* Matches your header height */
.blocker { height: 55px; };
All you are doing it putting an invisible div underneath the header 您正在执行的所有操作都在标题下方放置了一个不可见的div
Fiddle: https://jsfiddle.net/btv5bjfd/ 小提琴： https : //jsfiddle.net/btv5bjfd/
解决方案3
0 2016-05-23 14:10:06
I've posted your code in a fiddle to make is a bit easier to work with. 我将您的代码张贴在一个小提琴中，以使其易于使用。 Below is the fiddle link with the results, take a look and tell me if it's what you were looking for. 下面是带有结果的小提琴链接，请看一下并告诉我它是否正是您要的内容。
I've made your header attack to the top of the page which made me able to add a margin to the list. 我已经将标题攻击置于页面顶部，这使我能够在列表中添加边距。
.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; }
解决方案4
0 2016-05-23 14:11:48
If you want your scroll bar to not scroll "through" the header, you're going to have to make a fixed content area which will handle the scrolling, rather than the body which normally handles the scrolling. 如果您不希望滚动条在标题中“滚动”，则需要制作一个固定的内容区域来处理滚动，而不是通常用于处理滚动内容的主体。
Check This Fiddle for the basics. 检查此小提琴的基础知识。
Make sure you have zero margin and padding on your body 确保身体上的空白和填充为零
* {
margin:0;
padding:0;
}
Then, make sure your header is fixed to the top and left 然后，确保标题固定在顶部和左侧
.campaign-header {
top:0;
left:0;
}
Then your campaign scroll list is going to be a fixed content container that is 100% height minus the height of the header, positioned at the bottom of the header and allows scrolling 然后，您的广告系列滚动列表将是一个固定内容容器，高度为100％减去标题的高度，该标题位于标题的底部并允许滚动
.scroll-campaign-list {
position:fixed;
top:55px;
left:0;
width:100%;
height:calc(100% - 55px);
overflow:scroll;
}
Here is a fiddle with your content in it 这是其中包含您内容的小提琴
解决方案5
-1 2016-05-23 14:21:42
I think that it is better to have different classes. 我认为最好有不同的班级。 So I have deleted the .container class. 所以我删除了.container类。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.