修復下面的標題阻止內容
[英]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.