Bootstrap 3 CSS - fixed navbar causes a lot of white space on short pages

Question

Following this example from the official documentation, i noticed that on pages who are going to be < 2000px in height, i will have a lot of white space below the footer.

I can't specify the height of the footer as per this example (it might increase dynamically) so i guess i can't stick it to the footer?

How to work around this?

Answer 1

Use the Boostrap's sticky footer, and for the height of Footer, use this jquery, it checks height of footer and adds it to the html tag. It runs on page load as well as on Window.resize event, so it works great for Responsive projects.

$(document).ready(function(){
    $(window).resize(function(){
        $("html").css("padding-bottom",$(".footer").outerHeight())
    }),
        $("html").css("padding-bottom",$(".footer").outerHeight()
    );
});

Answer 2

What actually makes the footer stick to the bottom of the page in the example you are linking to in your comment is not the footer height, but the following CSS rules:

.footer {
  position: absolute;
  bottom: 0;
}

You can see this for yourself if you view the footer through your browser's developer tools and disable the height CSS rule, the footer will continue to be at the bottom of the page.

As far as the body margin is concerned, since your footer does not have a fixed height the only way you can set this is use Javascript to measure the footer and set the body margin on document.ready. See the attached example:

$(document).ready(function(){
  var footerHeight = $('.footer').height();
  $('body').css('margin-bottom', footerHeight);
});

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

body > .container {
  padding: 60px 15px 0;
}
.container .text-muted {
  margin: 20px 0;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

code {
  font-size: 80%;
}

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>

<!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <!-- Begin page content -->
    <div class="container">
      <div class="page-header">
        <h1>Sticky footer with fixed navbar</h1>
      </div>
      <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body &gt; .container</code>.</p>
      <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
    </div>

    <footer class="footer">
      <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
      </div>
    </footer>