How to anchor footer to bottom of screen in Twitter Bootstrap?

takeit2012-05-11 08:53:28

css

takeit, 2012-05-11 08:53:28

Hello.
I can't "stick" the footer in any way.

Google issues github.com/twitter/bootstrap/issues/306

But the solutions they offer don't work correctly for me.

Anyone faced the same problem?

Thank you.

Answer the question

In order to leave comments, you need to log in

23 answer(s)

Sergey, 2012-05-11
@takeit

To attach a footer to the bottom of the page, there are many options. The simplest is to add for html and body min-height:100% and position:relative; Then wrap everything in a wrapper with a bottom padding equal to the height of your footer, and assign Position:absolute;bottom:0 to the latter.
If it doesn't work out for you, just look for articles. Them in the network of the sea. And the bootstrap itself should not in any way interfere with this.

Sergey Eremin, 2013-03-28
@Sergei_Erjemin

Damn… what advice… there is a built-in class: navbar-fixed-bottom

<div class="navbar-fixed-bottom row-fluid">
      <div class="navbar-inner">
          <div class="container">

web11, 2014-06-09
@web11

for bootstrap 3 there is a separate example with a sticky footer
getbootstrap.com/examples/sticky-footer
you need to add to the style file

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

Sergey, 2013-04-03
@RomeO_rzn

I decided through a script, in my opinion it’s easier and there is no need to fence wrappers and extra styles, in addition, the footer does not hang out all the time on the screen

if ($(document).height() <= $(window).height())
  $("footer.footer").addClass("navbar-fixed-bottom");

George, 2012-05-11
@Georgy1

I like to create a table like this

<head>
<style>
table {
min-height: 100% !important;
}
tr#footer {
height: 50px; /*Тут ваша константа*/
}
</style>
</head>
<body>
<table>
<tr id="maincontent">
<td>
<-- Контент ваш -->
</td>
</tr>
<tr id="footer">
<td>
<-- Тело футера -->
</td>
</tr>
</table>
</body>

And in

igorgabby, 2018-08-15
@igorgabby

Pretty weird advice. I recommend you use css flexbox elements. Then everything will be dynamic and you won't have to worry about the height of the footer and do position: absolut.
It will be enough for you to do this:

<body>
ᅠᅠ<header>…</header>
ᅠᅠ<main class="content">…</main>
ᅠᅠ<footer>…</footer>
</body>

html, body {
ᅠᅠheight: 100%;
}
body {
ᅠᅠdisplay: flex;
ᅠᅠflex-direction: column;
}
.content {
ᅠᅠflex: 1 0 auto;
}

Ruslan (beckson), 2020-03-21
@beckson

For Bootstrap4:

<body class="d-flex flex-column min-vh-100">
    <div class="wrapper flex-grow-1"></div>
    <footer></footer>
</body>

wizard80, 2016-04-30
@wizard80

Solution for footer with "rubber" (adaptive) height" for Bootstrap 3. Implementation here

html {
    position: relative;
    min-height: 100%;
}
body {
    margin-bottom: 10vh;
}
footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 10vh; /*высота футера будет зависеть от высоты экрана*/
}
/* чтобы весь футер заливался */
footer .row{
    background-color: #193441;
}

The above examples worked only on the monitor and did not work on the phone. Plus, my footer content can dynamically change depending on the number of pages in the group. And so everything is displayed both on the phone and on the monitor. In general, you can do a lot with CSS without javascript. Pay attention to flexbox technology. Bootstrap 4 is already working on it

Halfi, 2012-05-16
@Halfi

footer - position:absolute; bottom:0;
content - footer-sized padding-bottom.
Tovarischi tabloverstalshchiki, read the definition of the table. Most importantly, understand what a table is! Tables are needed to correctly present information to the user, and the markup should be in blocks ... Try to tell a non-web application developer that you mark up the position of blocks using tables, not blocks (um, pun ..). Use the right semantic elements. You can also paste over the wall with envelopes instead of wallpaper, but why, when there is wallpaper!? ..

fearrr, 2016-11-26
@fearrr

Here is the solution I came up with.
It seems to have learned everything.

var footer = $('.footer'),
    pageContainer = $('.page-container'),
    fixClass = 'navbar-fixed-bottom';

    function stickyFooter() {
        var windowHeight  = $(window).height(),
            contentHeight = pageContainer.height(),
            footerHeight  = footer.height();
        footer.removeClass(fixClass);
        if (contentHeight <= windowHeight-footerHeight){
            footer.addClass(fixClass);
        }
    }

    stickyFooter();
    $(window).resize(function () {
        stickyFooter();
    });

html code example

<div class="page-container">
    <section class="header"></section>
    <section class="nav"></section>
    <section class="content"></section>
</div>
<div class="footer">
</div>

asminog, 2013-02-22
@asminog

Found this

Leagnus, 2015-01-06
@Leony

From the point of view of adaptability, it’s better to spit and not use it:
if there is content, there will be snuggling.
A fixed height is an unnecessary complication.
Or use it exclusively on error pages or where there is little content.

diversant123, 2019-11-21
@diversant123

Keep the perfect script! No crutches! Everything works clearly!

$(function(){
    resizeAll();
    $(window).bind("resize", function(){
        resizeAll();
    });
});

$(window).bind('load', function() {resizeAll()});


function footerStickBottom (footer_block) {
    $(footer_block).css({'margin-top':0});
    var allWindowsHeight = $(window).height();
    var footerBottomOffset = $(footer_block).offset().top + $(footer_block).outerHeight();
    // console.log(allWindowsHeight);
    // console.log(footerBottomOffset);
    if (allWindowsHeight > footerBottomOffset) {
        var footerMarginTop = allWindowsHeight - footerBottomOffset;
        $(footer_block).css({'margin-top':footerMarginTop});
    }
}

function resizeAll() {

    footerStickBottom ('.footer');
    
}

ajaxtelamonid, 2012-05-11
@ajaxtelamonid

You can make a wireframe with a pressed footer on csstemplater.com, for example.

Stanislav Ezersky, 2012-10-26
@EzS

Here is a useful link

erdmko, 2014-04-14
@erdmko

sass mixin for Stickyfooter

=sticky-footer($footer_height, $root_selector:"#root", $root_footer_selector:"#root_footer", $footer_selector:"#footer")
  html
    :height 100%
  body
    :height 100%
  #{$root_selector}
    :min-height 100%
    :margin-bottom -#{$footer_height}
    #{$root_footer_selector}
      :height #{$footer_height}
  #{$footer_selector}
    :clear            both
    :position         relative
    :height          #{$footer_height}

Leagnus, 2014-07-04
@Leagnus

add class navbar-static-bottom

Mad-cote, 2015-11-03
@Mad-cote

It's simple enough.

<html>
<body>
<div class="page">
-- Header --
-- Content --

-- Это если с fix --
<div id="fix"></div>
-- Это если с fix --
</div>

<footer class="footer">
</footer>
</body>
</html>

<style>
html, body {height:100%; position:relative;}
.page {margin:0 auto 60px; ИЛИ padding: 0 0 60px;}
.footer {height:60px; width:100%; position:absolute; bottom:0;}

ИЛИ если c fix

html, body {height:100%;}
.page {margin:0 auto -60px; }
#fix {padding:0 0 60px;}
.footer {height:60px;  position:relative;}
</style>

Option 2 is not bad, but it does not work if you need to solve the problem with scrolling by width. Namely: when the block crawls out of the screen width, we do overflow , there will be no strip from the bottom, but as soon as you click the mouse and swipe across the screen, problems begin. In this case, the 2nd footer option will not work. Therefore, the most correct thing is to use 1 option and fix from the jambs of the screen.

<style>
html, body {height:100%; position:relative; overflow-x:hidden;}
body {overflow:hidden; height:auto; min-height:100%;}
.page {margin:0 auto 60px; ИЛИ padding: 0 0 60px;}
.footer {height:60px; width:100%; position:absolute; bottom:0;}
</style>

In such a simple way, we got rid of the problem with the footer and at the same time, if any block is larger than the width of the screen, then there will be no unnecessary scrollbar below (in addition, the mouse will not be able to go beyond).

Dmitry, 2016-07-22
@seventh

For some reason, everything turned out to be stiky (over the text at the bottom), then not at the bottom (if the page content is half the screen). The script found here helped . Dirty, but it works.

<script>

  $(document).ready(function() {

   var docHeight = $(window).height();
   var footerHeight = $('#footer').height();
   var footerTop = $('#footer').position().top + footerHeight;

   if (footerTop < docHeight) {
    $('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
   }
  });
 </script>

Now it's enough to have an element with id="footer".
If the text is not full screen, to remove the scroll bar, you can change 10 to 0.

palaniichukdmytro, 2016-07-24
@palaniichukdmytro

You can try with flex boxes.
codepen.io/palaniichukdmytro/pen/YWyvjR

_ Disciple, 2017-03-31
@aafrimenaa

Hello.
Continuing the topic with the footer in the bootstrap. I tried a bunch of variations, but I just can't get the footer to the bottom of the screen.
navbar-fixed-bottom works, but it fixes the footer on the screen, which is not pretty.

Chuck Thornton, 2019-08-14
@ctornton

Although the question is old, I saw it and asked myself a question. Will help people who get through the search.
What I came up with:
Here's how I solved the footer problem, not necessarily in bootstrap, just when laying out layouts.
In css there is such a thing as calc (in fact, it performs different calculations, window height and others).
We need to make the main (content block) 100% high minus the height of the header and footer, then everything will work out perfectly. Link with an example: https://jsfiddle.net/vpris/g14q6krt/41/ Sketched in a hurry, you can play with the calculations more. The footer is pressed perfectly, there is no need to fence the js code that tracks its position.
There are examples with an empty block that is the same height as the footer. The footer itself is given a negative margin, but my example is more interesting.
There are styles for the qube class. Create some divs with this class and check if main stretches nicely, the footer goes down.

jeka-ekb, 2020-08-04
@jeka-ekb

beckson @beckson
Для Bootstrap4:
<body class="d-flex flex-column min-vh-100">
    <div class="wrapper flex-grow-1"></div>
    <footer></footer>
</body>

in IE11 does not want to press the footer, in the rest everything is OK