Put div below navigation bar and don't overlap content

Question

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

Answer 1

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:

    

        
Home
        
Link
        
Link
        

        
More
        
Options
    



    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World
    
Hi World
       Hi World
    
Hi World

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