title: Put div below navigation bar and don't overlap content
body: <p>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.</p>
  
  <p>Let me say I'm using Bootstrap 3.2.0 to lay out the site.</p>
  
  <p>The issue is that due to the margins of my navigation bar, the content I want to put below overlap the navigation bar and it's shown besides the navigation bar. For a better explanation of this I provide you my code, and a live example:</p>
  
  <p><strong>UPDATE:</strong> I have noticed something that increases a little bit the difficult from my point of view, and it's that the body has a rule to hide the scroll and doesn't let scroll up/down:</p>
  
  <p>I would like just to scroll over the content "Hi World" and obviously that the whole content is shown from the first word: "BEGIN" to "END" word scrolling.</p>
  
  <pre><code>body {
     overflow: hidden;
  }
  </code></pre>
  
  <p><a href="http://www.bootply.com/TZebvFEl3T" rel="noreferrer">http://www.bootply.com/TZebvFEl3T</a> (I updated the bootply code with the required restictions).</p>
  
  <pre><code>&lt;nav class="navbar navbar-default navbar-fixed-top my-own-style"&gt;
     &lt;ul class="nav navbar-nav"&gt;
      &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;li class="divider-vertical"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;More&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Options&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;div&gt;
      &lt;p&gt;BEGIN&lt;/p&gt;
      &lt;p&gt;Hi World&lt;/p&gt;
         Hi World
      &lt;p&gt;Hi World&lt;/p&gt;
      &lt;p&gt;Hi World&lt;/p&gt;
         Hi World
      &lt;p&gt;Hi World&lt;/p&gt;
      &lt;p&gt;Hi World&lt;/p&gt;
         Hi World
      &lt;p&gt;Hi World&lt;/p&gt;
      &lt;p&gt;Hi World&lt;/p&gt;
         Hi World
      &lt;p&gt;Hi World&lt;/p&gt;
      &lt;p&gt;Hi World&lt;/p&gt;
      ...
      &lt;p&gt;END&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2><strong>UPDATE 2:</strong></h2>
  
  <p>Experimenting with your answers and my own research I achieved something it's close to work for me, I have an scroll for the div with the content below the navigation menu and now the content doesn't overlap.</p>
  
  <p>The issue is that I also have a fixed footer at the page, if I resize the window the scroll is not completely visible and I can't reach the end of the list because is overlaped by the footer, so doesn't let me see the end of the scroll, if I remove the footer obviously this is visible.</p>
  
  <p>But I have to adjust my scroll to start at the bottom of the top nav menu, and end at the top of my footer as you can see in the example, the issue appears when you resize the browser.</p>
  
  <p>I think I'm looking for something like this for my container, please have a look to next link:</p>
  
  <p><strong><a href="https://stackoverflow.com/questions/11369764/content-with-100-between-header-and-footer">Content with 100% between header and footer</a></strong></p>
  
  <p>And here is my code:</p>
  
  <h2><a href="http://www.bootply.com/knJkGoEHWQ" rel="noreferrer">http://www.bootply.com/knJkGoEHWQ</a></h2>
  
  <p>HTML:</p>
  
  <pre><code>&lt;nav class="navbar navbar-default navbar-fixed-top my-own-style"&gt;
      &lt;ul class="nav navbar-nav"&gt;
          &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
          &lt;li class="divider-vertical"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;More&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Options&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;div class="container-fluid scroll"&gt;
      &lt;p&gt;BEGIN&lt;/p&gt;
      &lt;p&gt;Hi World&lt;/p&gt;
      &lt;p&gt;Hi World&lt;/p&gt;
      &lt;p&gt;Hi World&lt;/p&gt;
      &lt;p&gt;Hi World&lt;/p&gt;
      &lt;p&gt;Hi World&lt;/p&gt;
      &lt;p&gt;Hi World&lt;/p&gt;
      &lt;p&gt;Hi World&lt;/p&gt;
      &lt;p&gt;Hi World&lt;/p&gt;
      ... 
      &lt;p&gt;END&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="navbar navbar-default navbar-fixed-bottom"&gt;
      &lt;div class="navbar-header"&gt;&lt;a class="navbar-brand" href="#"&gt;Brand&lt;/a&gt;&lt;/div&gt;
      &lt;ul class="nav navbar-nav"&gt;
       &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;More&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;Options&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/* CSS used here will be applied after bootstrap.css */
  
  body, html {
      height: 100%;
      overflow: hidden;
      padding-top: 44px;
  }
  
  .my-own-style {
      margin-left: 37px;
      margin-top: 37px;
  }
  
  .scroll {
      overflow: auto;
      height: 80%;
      padding: 0;
      margin-left: 37px;
  }
  </code></pre>
  
  <hr>
  
  <h2>UPDATE 3 (SOLUTION):</h2>
  
  <p>Ok regarding the update 2, the issue was so simple to sort it out, maybe I didn't see it.
  Basically in the same way I added a padding on the top of the body to set my main container below the top navigation menu, I have to do exactly the same but with the bottom padding of the body to set my main container above the bottom navigation menu.</p>
  
  <p>Moreover, I set the height to 100% for my main container in that way it expand along the whole div which contains it.</p>
  
  <p>Here is the solution:</p>
  
  <h2><a href="http://www.bootply.com/sazMMHNCGy" rel="noreferrer">http://www.bootply.com/sazMMHNCGy</a></h2>
  
  <p>HTML:</p>
  
  <pre><code>&lt;nav class="navbar navbar-default navbar-fixed-top my-own-style"&gt;
      &lt;ul class="nav navbar-nav"&gt;
          &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
          &lt;li class="divider-vertical"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;More&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Options&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;div class="scroll"&gt;
      &lt;p&gt;BEGIN&lt;/p&gt;
      &lt;p&gt;Hi World&lt;/p&gt;
      Hi World
      &lt;p&gt;Hi World&lt;/p&gt;
      &lt;p&gt;Hi World&lt;/p&gt;
      Hi World
      &lt;p&gt;Hi World&lt;/p&gt;
      &lt;p&gt;Hi World&lt;/p&gt;
      &lt;p&gt;Hi World&lt;/p&gt;
      &lt;p&gt;Hi World&lt;/p&gt;
      ...
      &lt;p&gt;END&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="navbar navbar-default navbar-fixed-bottom"&gt;
      &lt;div class="navbar-header"&gt;&lt;a class="navbar-brand" href="#"&gt;Brand&lt;/a&gt;&lt;/div&gt;
      &lt;ul class="nav navbar-nav"&gt;
       &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;More&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;Options&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/* CSS used here will be applied after bootstrap.css */
  
  body, html {
      height: 100%;
      overflow: hidden;
      padding-top: 44px;
      padding-bottom: 25px;
  }
  
  .my-own-style {
      margin-left: 37px;
      margin-top: 37px;
  }
  
  .scroll {
      overflow: auto;
      height: 100%;
      padding: 0;
      margin-left: 37px;
  }
  </code></pre>
  
  <p>And for me this is the solution I was looking for.</p>