Put Div Below Navigation Bar And Don't Overlap Content
Solution 1:
From the Bootstrap documentation:
Body padding required The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
So just add your body padding:
body
{
padding-top: 70px;
}
If you don't want your body to scroll behind the navbar, change your CSS to use padding instead of margin:
.my-own-style {
padding-left: 37px;
padding-top: 37px;
}
Solution 2:
I really don't like having to add elements that are just there for purposes of pushing content around. This is what positioning is designed to handle. The best way to do this is to start by adding padding to the top of your body, as @davidg stated in his answer. Further, to move your navbar into position, don't use margins. Instead using the top, left and right properties. The navbar-fixed-top class already sets the position to fixed, so you don't need to give any position property value. I also added the container-fluid class to your div (so that you get some padding inside) and a custom class scrollable to set the overflow property.
DEMO
CSS:
html, body {
height: 100%; /*Fixes the height to 100% of the viewport*/
}
body {
padding-top: 87px; /*50px for the height of the navbar + 37px for the offset*/padding-bottom: 50px; /*50px for the height of the bottom navbar*/
}
.navbar-offset {
top: 37px; /*Offsets the top navbar 37px from the top of the viewport*/
}
.container-fluid.scrollable {
height: 100%; /*Sets the scrollable area to 100% of the viewport*/overflow: auto; /*Allows the scrollable area to have a scrollbar based on the height of its content*/background: #ccc;
}
HTML:
<navclass="navbar navbar-default navbar-fixed-top navbar-offset"><ulclass="nav navbar-nav"><liclass="active"><ahref="#">Home</a></li><li><ahref="#">Link</a></li><li><ahref="#">Link</a></li><liclass="divider-vertical"></li><li><ahref="#">More</a></li><li><ahref="#">Options</a></li></ul></nav><divclass="container-fluid scrollable"><p>BEGIN</p><p>Hi World</p>
...
<p>END</p></div><navclass="navbar navbar-inverse navbar-fixed-bottom"><ulclass="nav navbar-nav"><liclass="active"><ahref="#"><spanclass="glyphicon glyphicon-home"></span></a></li><li><ahref="#"><spanclass="glyphicon glyphicon-user"></span></a></li><li><ahref="#"><spanclass="glyphicon glyphicon-calendar"></span></a></li><li><ahref="#"><spanclass="glyphicon glyphicon-comment"></span></a></li><li><ahref="#"><spanclass="glyphicon glyphicon-star"></span></a></li></ul></nav>
Solution 3:
you can simply get this fixed by updating your margins to paddings.. and update the div like the below..
HTML
<div id="content">....</div>
CSS
#content{
position:absolute;
top:100px;
}
Solution 4:
You should displace the scrolling div with a fixed div before it:
http://www.bootply.com/3UpMI5yTIA
.scroll-pre {
height: 100px;
width: 100%;
background-color: inherit;
position: fixed;
}
And html:
<navclass="navbar navbar-default navbar-fixed-top my-own-style"><ulclass="nav navbar-nav"><liclass="active"><ahref="#">Home</a></li><li><ahref="#">Link</a></li><li><ahref="#">Link</a></li><liclass="divider-vertical"></li><li><ahref="#">More</a></li><li><ahref="#">Options</a></li></ul></nav><divclass="scroll-pre"></div><divclass="scroll"><p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p><p>Hi World</p>
Hi World
<p>Hi World</p></div>
EDIT
http://www.bootply.com/CKD9nrQxG5
If you want to scroll on the div (not on the page) then add the class "scroll" to your scrolling div and update css with:
body, html {
overflow: hidden;
height: 100%;
}
.scroll {
margin-top: 100px; // Same as .scroll-preheightoverflow: auto;
height: 100%;
}
EDIT 2 (footer)
http://www.bootply.com/JwmaWgvWPI
If you want a footer, the strategy is the same, place a fixed div in bottom:0
. Again it will only work if you place a background to the pre-scroll and footer divs.
I've adjusted the paddigns of the scroll to let the last item be visible.
.scroll {
margin-top: 100px;
overflow: auto;
height: 100%;
padding-bottom:130px;
margin-bottom: 30px;
}
.footer {
position:fixed;
bottom:0;
height:30px;
background:inherit;
width:100%;
}
Solution 5:
You can try the following codes:
HTML Code:
<navclass="navbar navbar-default">
.......
</nav>
CSS Code:
.navbar{
border-radius: 0;
}
Post a Comment for "Put Div Below Navigation Bar And Don't Overlap Content"