Search code examples
htmlcsstwitter-bootstrapnavigationalignment

Bootstrap: make a dynamic div between navbar-fixed-top and navbar-fixed-bottom

I have a Bootstrap Page with two div's for navigation, one is a navbar-fixed-top and the other is a navbar-fixed-bottom. So, the navbars stick to the top/bottom.

Now I want to declare a div that is exactly the space between the two navbars (xxxxxx in the sketch). Any suggestions on how you would implement this div?

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    ..
  </div>
</div>

[DIV FOR THE REST OF THE PAGE]

<div class="navbar navbar-inverse navbar-fixed-bottom">
  <div class="container">
    ..
  </div>
</div>

.________________________________________________________. |~~~~~~~~~~~~~~~~~~~navbar-fixed-top~~~~~~~~~~~~~~~~~~~| |________________________________________________________| |xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx| |xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx| |xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx| |xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx| |xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx| |xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx| |________________________________________________________| |~~~~~~~~~~~~~~~~~navbar-fixed-bottom~~~~~~~~~~~~~~~~~~| |________________________________________________________|

Solution

  • If Your Navbars are fixed. You May Add Margin in Top and Bottom of body.

    <html>    
 <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
              <div class="container">
                ..
              </div>
            </div>


            [DIV FOR THE REST OF THE PAGE]


            <div class="navbar navbar-inverse navbar-fixed-bottom">
              <div class="container">
                ..
              </div>
            </div>
        <style>
            body{
                 margin-top: 100px;
                 margin-bottom: 100px;
            }
        </style>
    </body>
</html>

    Margin top is the height of top nav, and Margin bottom is the height of bottom nav.