Put Div Below Navigation Bar And Don't Overlap Content

March 31, 2024 Post a Comment

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 container.

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;
}

Demo

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;
}

Html5 School