Put div below navigation bar and don't overlap content
My issue is that I fixed a navigation bar at the top of my webpage and it includes both side margins and top one. Below this navigation bar, I want to set an scrollable containe
-
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; }讨论(0) -
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:
<nav class="navbar navbar-default navbar-fixed-top navbar-offset"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="divider-vertical"></li> <li><a href="#">More</a></li> <li><a href="#">Options</a></li> </ul> </nav> <div class="container-fluid scrollable"> <p>BEGIN</p> <p>Hi World</p> ... <p>END</p> </div> <nav class="navbar navbar-inverse navbar-fixed-bottom"> <ul class="nav navbar-nav"> <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span></a></li> <li><a href="#"><span class="glyphicon glyphicon-user"></span></a></li> <li><a href="#"><span class="glyphicon glyphicon-calendar"></span></a></li> <li><a href="#"><span class="glyphicon glyphicon-comment"></span></a></li> <li><a href="#"><span class="glyphicon glyphicon-star"></span></a></li> </ul> </nav>讨论(0) -
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:
<nav class="navbar navbar-default navbar-fixed-top my-own-style"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="divider-vertical"></li> <li><a href="#">More</a></li> <li><a href="#">Options</a></li> </ul> </nav> <div class="scroll-pre"></div> <div class="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-pre height overflow: 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%; }讨论(0) -
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; }Demo
讨论(0) -
You can try the following codes:
HTML Code:
<nav class="navbar navbar-default"> ....... </nav>CSS Code:
.navbar{ border-radius: 0; }讨论(0)
加载中...
- 热议问题