修复下面的标题阻止内容
[英]fixed header blocking content below
问题描述
因此，我有一个已设置为固定的标头。 我在其下面有一个滚动项列表，但标题保持不变。 但是，我面临的问题之一是列表被最顶部的固定标头覆盖，从而阻碍了列表的第一项。
我尝试添加“ 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>
5 个解决方案
解决方案1
1 已采纳 2016-05-23 14:03:07
首先，重新设置页边距：
body {
margin: 0;
}
接下来，为scroll-campaign-list设置padding-top（而不是margin-top）：
.container.scroll-campaign-list {
padding-top: 50px;
}
解决方案2
0 2016-05-23 14:04:09
我之前添加了“阻止程序”：
HTML：
<div class="blocker"> </div>
CSS：
/* Matches your header height */
.blocker { height: 55px; };
您正在执行的所有操作都在标题下方放置了一个不可见的div
小提琴： https : //jsfiddle.net/btv5bjfd/
解决方案3
0 2016-05-23 14:10:06
我将您的代码张贴在一个小提琴中，以使其易于使用。 下面是带有结果的小提琴链接，请看一下并告诉我它是否正是您要的内容。
我已经将标题攻击置于页面顶部，这使我能够在列表中添加边距。
.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
如果您不希望滚动条在标题中“滚动”，则需要制作一个固定的内容区域来处理滚动，而不是通常用于处理滚动内容的主体。
检查此小提琴的基础知识。
确保身体上的空白和填充为零
* {
margin:0;
padding:0;
}
然后，确保标题固定在顶部和左侧
.campaign-header {
top:0;
left:0;
}
然后，您的广告系列滚动列表将是一个固定内容容器，高度为100％减去标题的高度，该标题位于标题的底部并允许滚动
.scroll-campaign-list {
position:fixed;
top:55px;
left:0;
width:100%;
height:calc(100% - 55px);
overflow:scroll;
}
解决方案5
-1 2016-05-23 14:21:42
我认为最好有不同的班级。 所以我删除了.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>
修复了带有可滚动导航栏的标题和不在浏览器视口下方的内容
[英]Fixed header with scrollable navbar and content that does not go below browser viewport
如何在不留边距的情况下开始固定 header 下面的内容 div？
[英]How to start content div below fixed header without giving margin?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.