Twitter Bootstrap Question posted in

Twitter bootstrap – How to make a footer element take up remaining height of page

Question

My question comes with the footer. Currently it’s sitting on the bottom of the page, and if all else fails I’ll accept that, but what I want is for the footer to be immediately after the content, i.e. removing the html,body {height:100%} declaration. However, I want for the footer to take up any remaining visible space (if there is any). I’m asking because I’m good in programming languages and can more than likely resolve this in Javascript, but CSS has never been my strong suit and I’m sure this has probably been done before.

Notes

I’m using Twitter Bootstrap for most of the layout, adding my own CSS where necessary.

I recommend using the codepen to view as the snippet editor seems small so you’d get the mobile version of the webpage.

Link to CodePen

http://codepen.io/anon/pen/bdzMGY

html,
body {
  height: 100%;
}
.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  padding-bottom: 100px;
}
.footer.panel-footer {
  margin-top: -101px;
  height: auto;
  min-height: 101px;
  background-color: #090909;
  color: #9f9f9f;
  border-radius: 0;
  font-size: 12px;
}
.row.auto-height {} .main.container-fluid {
  padding: 0;
  margin: 0;
}
.navbar-brand,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: fantasy;
}
aside.sidebar-panel h4 {
  border-bottom: 1px dashed black;
}
header.navbar[role="navigation"] {
  margin-bottom: 0;
}
article header a {
  color: inherit;
}
div.push-page {
  height: 5px;
}
aside {
  background-color: hsl(220, 70%, 50%);
}
aside a {
  color: white;
  height: 100%;
}
aside input.form-control[type="search"]:focus {
  box-shadow: 0px 0px 5px blue inset;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="wrapper">
  <!-- Begin Navbar -->
  <header class="navbar navbar-inverse navbar-static-top" role="navigation">
    <div class="container-fluid">
      <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="#">Brand
               </a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">

        <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Class Resources<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="">-All-</a>
              </li>
              <li><a href="#">Period 1</a>
              </li>
              <li><a href="#">Period 2</a>
              </li>
              <li><a href="#">Period 3</a>
              </li>
              <li><a href="#">Period 5</a>
              </li>
              <li><a href="#">Period 6</a>
              </li>

            </ul>
          </li>
          <li><a href="#">About Me</a>
          </li>
          <li><a href="#">Log in</a>
          </li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
    <!--/.container-fluid -->
  </header>
  <!-- End Header Nav -->

  <!-- Main Section -->
  <section class="container-fluid">
    <section class="row auto-height">
      <aside class="col-sm-3 col-xs-12 pull-right">
        <h3>Sidebar</h3>
        <ul class="nav nav-pills nav-stacked navbar-collapse">

          <li>
            <form action="#" method="get">
              <div class="input-group">
                <input type="search" name="s" class="form-control" placeholder="Search for...">
                <span class="input-group-btn">
                                        <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span>
                </button>
                </span>
              </div>
            </form>
          </li>
          <li><a href="#">Register</a>
          </li>
        </ul>

      </aside>
      <div class="push-page"></div>
      <main class="col-sm-9">
        <p>This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might
          say something like this:</p>
        <blockquote>
          <p>Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my blog. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)</p>
        </blockquote>
        <p>…or something like this:</p>
        <blockquote>
          <p>The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.</p>
        </blockquote>
        <p>As a new WordPress user, you should go to <a href="http://jhecht.dev/wp-admin/">your dashboard</a> to delete this page and create new pages for your content. Have fun!</p>
      </main>
    </section>
  </section>
  <!-- /main end main section -->
</div>
<!-- End wrapper div -->
<footer class="footer panel-footer">
  <section class="container">
    <div class="row">

      <div class="col-md-4 col-xs-6 pull-right">
        <h5 class="text-center hidden-xs">Contact Info <span class="fa fa-comments"></span></h5>
        <h5 class="visible-xs">Contact Info <span class="fa fa-comments"></span></h5>
        <dl class="dl-horizontal">
          <dt>Phone</dt>
          <dd><a href="tel:5102311423"><span class="glyphicon glyphicon-earphone"></span> (123) 456-7890</a>
          </dd>
          <dt>Email</dt>
          <dd><a href="mailto:[email protected]"><span class="glyphicon glyphicon-envelope"></span> [email protected]</a>
          </dd>
          <dt>Facebook</dt>
          <dd><a href="//facebook.com/link"><span class="fa fa-facebook-square"></span> FAcebook</a>
          </dd>
          <dt>Twitter</dt>
          <dd><a href="//twitter.com/user"><span class="fa fa-twitter"></span> @Twitter</a>
          </dd>
        </dl>
      </div>

      <div class="col-md-2 col-xs-6">
        <h5>Other Resources <span class="glyphicon glyphicon-folder-open"></span></h5>
        <ul class="list-unstyled">
          <li>Yeah, other resources</li>

        </ul>
      </div>

    </div>
    <div class="col-xs-12 text-center">
      &copy;
      <br class="visible-xs"><small>Powered By <a href="//getbootstrap.com">Bootstrap</a>, <a href="//wordpress.com">Wordpress</a></small>
    </div>

  </section>
</footer>
Tags:

3

Answers


  1. 0

    Different approach of what you desire is to stick footer to the bottom of the page. How?

    You can simplify and just use the vh from css. Browser support

    Wrap that with a calc() function. Browser support

    And you end up with: calc(100vh - 161px). Being 161px the height of the header and footer combined.

    Apply that to the min-height in the .wrapper and he will always have the size needed to keep the footer at the bottom.

    .wrapper {
    min-height: calc(100vh - 161px);
    height: auto !important;
}

.footer.panel-footer{
    height:auto;
    min-height: 101px;
    background-color:#090909;
    color:#9f9f9f;
    border-radius:0;
    font-size:12px;
}

.row.auto-height{

}

.main.container-fluid{
    padding:0;
    margin:0;
}

.navbar-brand,
h1,
h2,
h3,
h4,
h5,
h6
{
    font-family:fantasy;
}



aside.sidebar-panel h4{
    border-bottom:1px dashed black;
}

header.navbar[role="navigation"]{
    margin-bottom:0;
}


article header a {
    color:inherit;
}

div.push-page{
    height:5px;
}

aside{
    background-color:hsl(220,70%,50%);
}

aside a{
    color:white;
    height:100%;
}

aside input.form-control[type="search"]:focus{
    box-shadow:0px 0px 5px blue inset;
}
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
  <!-- Begin Navbar -->
  <header class="navbar navbar-inverse navbar-static-top" role="navigation">
    <div class="container-fluid">
      <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="#">Brand
               </a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">

        <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Class Resources<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="">-All-</a></li>
              <li><a href="#">Period 1</a></li>
              <li><a href="#">Period 2</a></li>
              <li><a href="#">Period 3</a></li>
              <li><a href="#">Period 5</a></li>
              <li><a href="#">Period 6</a></li>

            </ul>
          </li>
          <li><a href="#">About Me</a></li>
          <li><a href="#">Log in</a>
          </li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
    <!--/.container-fluid -->
  </header>
  <!-- End Header Nav -->

  <!-- Main Section -->
  <section class="container-fluid">
    <section class="row auto-height">
      <aside class="col-sm-3 col-xs-12 pull-right">
        <h3>Sidebar</h3>
        <ul class="nav nav-pills nav-stacked navbar-collapse">

          <li>
            <form action="#" method="get">
              <div class="input-group">
                <input type="search" name="s" class="form-control" placeholder="Search for...">
                <span class="input-group-btn">
                                        <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
                </span>
              </div>
            </form>
          </li>
          <li><a href="#">Register</a></li>
        </ul>

      </aside>
      <div class="push-page"></div>
      <main class="col-sm-9">
        <p>This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might
          say something like this:</p>
        <blockquote>
          <p>Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my blog. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)</p>
        </blockquote>
        <p>…or something like this:</p>
        <blockquote>
          <p>The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.</p>
        </blockquote>
        <p>As a new WordPress user, you should go to <a href="http://jhecht.dev/wp-admin/">your dashboard</a> to delete this page and create new pages for your content. Have fun!</p>
      </main>
    </section>
  </section>
  <!-- /main end main section -->
</div>
<!-- End wrapper div -->
<footer class="footer panel-footer">
  <section class="container">
    <div class="row">

      <div class="col-md-4 col-xs-6 pull-right">
        <h5 class="text-center hidden-xs">Contact Info <span class="fa fa-comments"></span></h5>
        <h5 class="visible-xs">Contact Info <span class="fa fa-comments"></span></h5>
        <dl class="dl-horizontal">
          <dt>Phone</dt>
          <dd><a href="tel:5102311423"><span class="glyphicon glyphicon-earphone"></span> (123) 456-7890</a></dd>
          <dt>Email</dt>
          <dd><a href="mailto:[email protected]"><span class="glyphicon glyphicon-envelope"></span> [email protected]</a></dd>
          <dt>Facebook</dt>
          <dd><a href="//facebook.com/link"><span class="fa fa-facebook-square"></span> FAcebook</a></dd>
          <dt>Twitter</dt>
          <dd><a href="//twitter.com/user"><span class="fa fa-twitter"></span> @Twitter</a></dd>
        </dl>
      </div>

      <div class="col-md-2 col-xs-6">
        <h5>Other Resources <span class="glyphicon glyphicon-folder-open"></span></h5>
        <ul class="list-unstyled">
          <li>Yeah, other resources</li>

        </ul>
      </div>

    </div>
    <div class="col-xs-12 text-center">
      &copy; 
      <br class="visible-xs"><small>Powered By <a href="//getbootstrap.com">Bootstrap</a>, <a href="//wordpress.com">Wordpress</a></small>
    </div>

  </section>
</footer>
    Login or Signup to reply.
  2. 0

    You could just change the wrapper background to the footer colour and then apply a section colour:

    .wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
padding-bottom:100px;
background-color: #090909;
}

.wrapper section {
  background-color: #fff;
}

.footer.panel-footer {
    margin-top:-101px;
    height:auto;
    min-height: 101px;
    background-color:#090909;
    color:#9f9f9f;
    border-radius:0;
    font-size:12px;
}

    You’d need to tweak your footer border but this would fill any empty space on a page.

    Login or Signup to reply.
  3. 0

    here is one way I found, is it what you want ?
    http://codepen.io/anon/pen/mJvLrm

    <div class="wrapper">
  <!-- Begin Navbar -->
  <header class="navbar navbar-inverse navbar-static-top" role="navigation">
    <div class="container-fluid">
      <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="#">Brand
               </a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">

        <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Class Resources<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="">-All-</a></li>
              <li><a href="#">Period 1</a></li>
              <li><a href="#">Period 2</a></li>
              <li><a href="#">Period 3</a></li>
              <li><a href="#">Period 5</a></li>
              <li><a href="#">Period 6</a></li>

            </ul>
          </li>
          <li><a href="#">About Me</a></li>
          <li><a href="#">Log in</a>
          </li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
    <!--/.container-fluid -->
  </header>
  <!-- End Header Nav -->

  <!-- Main Section -->
  <section class="container-fluid">
    <section class="row auto-height">
      <aside class="col-sm-3 col-xs-12 pull-right">
        <h3>Sidebar</h3>
        <ul class="nav nav-pills nav-stacked navbar-collapse">

          <li>
            <form action="#" method="get">
              <div class="input-group">
                <input type="search" name="s" class="form-control" placeholder="Search for...">
                <span class="input-group-btn">
                                        <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
                </span>
              </div>
            </form>
          </li>
          <li><a href="#">Register</a></li>
        </ul>

      </aside>
      <div class="push-page"></div>
      <main class="col-sm-9">
        <p>This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might
          say something like this:</p>
        <blockquote>
          <p>Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my blog. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)</p>
        </blockquote>
        <p>…or something like this:</p>
        <blockquote>
          <p>The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.</p>
        </blockquote>
        <p>As a new WordPress user, you should go to <a href="http://jhecht.dev/wp-admin/">your dashboard</a> to delete this page and create new pages for your content. Have fun!</p>
      </main>
    </section>
  </section>
  <!-- /main end main section -->
</div>
<!-- End wrapper div -->
<footer class="footer panel-footer">
  <section class="container">
    <div class="row">

      <div class="col-md-4 col-xs-6 pull-right">
        <h5 class="text-center hidden-xs">Contact Info <span class="fa fa-comments"></span></h5>
        <h5 class="visible-xs">Contact Info <span class="fa fa-comments"></span></h5>
        <dl class="dl-horizontal">
          <dt>Phone</dt>
          <dd><a href="tel:5102311423"><span class="glyphicon glyphicon-earphone"></span> (123) 456-7890</a></dd>
          <dt>Email</dt>
          <dd><a href="mailto:[email protected]"><span class="glyphicon glyphicon-envelope"></span> [email protected]</a></dd>
          <dt>Facebook</dt>
          <dd><a href="//facebook.com/link"><span class="fa fa-facebook-square"></span> FAcebook</a></dd>
          <dt>Twitter</dt>
          <dd><a href="//twitter.com/user"><span class="fa fa-twitter"></span> @Twitter</a></dd>
        </dl>
      </div>

      <div class="col-md-2 col-xs-6">
        <h5>Other Resources <span class="glyphicon glyphicon-folder-open"></span></h5>
        <ul class="list-unstyled">
          <li>Yeah, other resources</li>

        </ul>
      </div>

    </div>
    <div class="col-xs-12 text-center">
      &copy; 
      <br class="visible-xs"><small>Powered By <a href="//getbootstrap.com">Bootstrap</a>, <a href="//wordpress.com">Wordpress</a></small>
    </div>

  </section>
</footer>

    And the CSS

    html,
body {
  height: 100%;
}
.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  padding-bottom: 100px;
}
.footer.panel-footer {
  margin-top: -101px;
  height: auto;
  min-height: 101px;
  background-color: #090909;
  color: #9f9f9f;
  border-radius: 0;
  font-size: 12px;
}
.row.auto-height {} .main.container-fluid {
  padding: 0;
  margin: 0;
}
.navbar-brand,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: fantasy;
}
aside.sidebar-panel h4 {
  border-bottom: 1px dashed black;
}
header.navbar[role="navigation"] {
  margin-bottom: 0;
}
article header a {
  color: inherit;
}
div.push-page {
  height: 5px;
}
aside {
  background-color: hsl(220, 70%, 50%);
}
aside a {
  color: white;
  height: 100%;
}
aside input.form-control[type="search"]:focus {
  box-shadow: 0px 0px 5px blue inset;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search