force footer on bottom on pages with little content

Asked 21/5, 2013 at 20:42 Answered 8/8, 2023 at 5:50

I have a page with only a couple of lines of content. I want the footer to be pushed to the bottom.

<div id="footer"></div>

I don't want to use

#footer
{
    position:fixed;
    bottom:0;
}

AKA Sticky Footer

Is this possible without jQuery?

any suggestions?

Oratorical answered 21/5, 2013 at 20:42 Comment(0)

Update 2021 - CSS GRID

Here is a solution using CSS Grid, this is by far the best way to do it on 2021.

html, body {
    margin: 0;
    height: 100%;
}
body {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr;
    grid-template-areas: "main" "footer";
    grid-template-rows: 1fr 80px;
}
main {
    background-color: #F8BBD0;
    grid-area: main;
}
footer {
    background-color: #7E57C2;
    grid-area: footer;
}

<body>
    <main>The content</main>
    <footer>Footer</footer>
</body>

Old Answer

There is another sticky footer by Ryan Fait that doesn't use position fixed:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}

Marelda answered 21/5, 2013 at 20:45 Comment(9)

This is an awesome pure CSS solution. Footer stays below the content if the content height is more than the browser window, but stays at the bottom of the browser window if there is less content. – Queasy 21/5, 2013 at 20:51

perfect! I guess this wont work on IE8 as it is using negative margin. – Oratorical 22/5, 2013 at 2:12

It works great in ie8. Try it. I'm not sure why IE8 has negative margin issues sometimes and not others, but it seems to be influenced by poorly constructed html/css. – Queasy 22/5, 2013 at 4:28

This method can be improved by using an :after selector on a wrapper inside the main wrapper and then deleting the push element. Supported for ie8+ – Kos 16/5, 2014 at 13:56

What about variable height footers? – Decimal 9/1, 2017 at 19:32

This is not a complete example. I have no idea where to put .push and whether .wrapper contains the .footer or not. I'll remove my downvote if you fix this. – Dreda 11/6, 2017 at 16:32

You can get the full example in the link he provided css-tricks.com/snippets/css/sticky-footer – Relinquish 15/1, 2020 at 1:53

Isn't Flexbox the most elegant and versatile solution nowadays? The one above assumes one knows the footer size in advance. – Querist 4/2, 2020 at 17:17

It is not advised to put a link to an example in SO, as the resource is likely to return a 404 in a year or two. I am sure we all have experienced this in the past. – Cupped 30/11, 2020 at 10:7

This Flexbox solution is neater and far easier to implement:

HTML

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

CSS

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

Just ensure you wrap the necessary divs inside the body.

Cloutman answered 2/6, 2018 at 17:52 Comment(3)

This should have been the accepted answer. Flexbox is the right approach to be taken to solving this footer problem. It still allows you to keep your footer inside wrapper div (which is a standard design practice) and absolutely prevents you from making absurd solutions such as setting the footer's position to absolute. – Break 29/6, 2020 at 15:3

This should have been the accepted answer. Easy to implement, simple, few changes to the existing code, works well with Bootstrap. – Dogfish 2/3, 2021 at 21:14

While it should be the accepted answer, I'm not sure it could have been at the time the accepted answer was posted. The question only dates to the year after the current Flexbox specification. Not sure the browser support would have been there. – Unlive 6/5, 2021 at 11:30

Update 2021 - CSS GRID

Here is a solution using CSS Grid, this is by far the best way to do it on 2021.

html, body {
    margin: 0;
    height: 100%;
}
body {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr;
    grid-template-areas: "main" "footer";
    grid-template-rows: 1fr 80px;
}
main {
    background-color: #F8BBD0;
    grid-area: main;
}
footer {
    background-color: #7E57C2;
    grid-area: footer;
}

<body>
    <main>The content</main>
    <footer>Footer</footer>
</body>

Old Answer

There is another sticky footer by Ryan Fait that doesn't use position fixed:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}

Marelda answered 21/5, 2013 at 20:45 Comment(9)

perfect! I guess this wont work on IE8 as it is using negative margin. – Oratorical 22/5, 2013 at 2:12

It works great in ie8. Try it. I'm not sure why IE8 has negative margin issues sometimes and not others, but it seems to be influenced by poorly constructed html/css. – Queasy 22/5, 2013 at 4:28

This method can be improved by using an :after selector on a wrapper inside the main wrapper and then deleting the push element. Supported for ie8+ – Kos 16/5, 2014 at 13:56

What about variable height footers? – Decimal 9/1, 2017 at 19:32

This is not a complete example. I have no idea where to put .push and whether .wrapper contains the .footer or not. I'll remove my downvote if you fix this. – Dreda 11/6, 2017 at 16:32

You can get the full example in the link he provided css-tricks.com/snippets/css/sticky-footer – Relinquish 15/1, 2020 at 1:53

Isn't Flexbox the most elegant and versatile solution nowadays? The one above assumes one knows the footer size in advance. – Querist 4/2, 2020 at 17:17

It is not advised to put a link to an example in SO, as the resource is likely to return a 404 in a year or two. I am sure we all have experienced this in the past. – Cupped 30/11, 2020 at 10:7

Here is a solution that does not require that the footer be placed outside of the main wrapper element, which is how most people structure their pages.

html,
body {
  margin: 0;
  height: 100%;
}

.wrapper {
  box-sizing: border-box;
  position: relative;
  padding-bottom: 1em; /* Height of footer */
  min-height: 100%;
}

header {
  background-color: #cff;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  color: #fff;
  background-color: #000;
}

<div class="wrapper">
  <header>I am the header.</header>
  <article>I am content that doesn't fill the page. The footer will appear at the bottom of the browser window. However, when I do fill the page, you will need to scroll down to see the footer.</article>
  <footer>I am the footer.</footer>
</div>

Explanation

The wrapper element will fill 100% of the viewport height. (You could also use 100vh for the wrapper if you don't want to set the height of the html and body elements.) The wrapper also has a bottom padding to create a placeholder for the footer to sit.

The footer is absolutely positioned to the bottom of the wrapper and sits in the placeholder created by the wrapper's bottom padding.

This means that when the page does not have scrollbars, the footer will be positioned at the very bottom. However, when there is enough content for scrollbars to appear, the footer will be pushed down below the content.

(The color and background-color CSS properties in the example are for decoration only, obviously. They are included so that when you run the code, you can clearly see the separated sections.)

Granulite answered 9/11, 2017 at 19:32 Comment(0)

Try Sticky Footer Solution by Steve Hatcher

/*  
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com
*/

* {
    margin: 0;
    padding: 0;
}

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to the total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {
    height: 100%;
}

#wrap {
    min-height: 100%;
}

#main {
    overflow: auto;
    padding-bottom: 180px;
}

/* must be same height as the footer */

#footer {
    position: relative;
    margin-top: -180px; /* negative value of footer height */
    height: 180px;
    clear: both;
}

/*Opera Fix*/
body:before {
    /* thanks to Maleika (Kohoutec)*/
    content: "";
    height: 100%;
    float: left;
    width: 0;
    margin-top: -32767px; /* thank you Erik J - negate effect of float*/
}

/* IMPORTANT

You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.

<!--[if !IE 7]>
    <style type="text/css">
        #wrap {display:table;height:100%}
    </style>
<![endif]-->

*/

Cathouse answered 29/11, 2013 at 21:23 Comment(3)

The link is broken. – Dreda 11/6, 2017 at 16:34

Avoid that link. I've put in an edit for review. As of 11/2017 it was redirecting to those scam pages claiming you computer has a virus etc. – Accomplishment 20/11, 2017 at 9:22

Why do we always reference "steve hatcher" for this snippet as if it was somebody famous or something? I didn't know we can add our signature to a snippet like this forever – Keelby 1/7, 2019 at 9:4

Another way to do this if you don't know the footer size is to use javascript and css

html, body{
    height:100%;
    height:100%;
}

#footer{
    background-color: #292c2f !important;
    position:absolute;bottom:0px;
}

and Javascript part

$(document).ready(function(){
        if ($(document).height() > $(window).height()) {
            $('#footer').css('position', 'relative');
        }
});

You can do this with another approach just easily by setting min-height on the tag before your footer tag.

.the-tag-before-footer{
     min-height:30%;
 }

Within answered 17/7, 2019 at 9:58 Comment(0)

I tried a lot of approaches, but results were different when page was totally fill or not. The simplest and efficient solution is to use flex.

html, body {height: 100%;}
body {display: flex; flex-direction: column;}
.content {flex: 1 0 auto; padding: 20px;}
.footer {flex-shrink: 0; padding: 20px;}

<div class="content">
  <h1>The GOAT Footer with Flexbox</h1>
  <p>You can add content to test with a full page</p>
</div>
<footer class="footer">
  The GOAT Footer 
</footer>

Credits to CSS Trick

Bresnahan answered 20/8, 2020 at 21:28 Comment(1)

Thank you simple and works with multiple types of pages with different needs! – Downstate 28/9, 2020 at 2:29

First wrap all of your main content in a div element and give it a class of “wrapper” (or call it whatever you want).

HTML:

<body>
    <div class="wrapper">
        <h1>Main Content</h1>
    </div>
    <footer>
        <p>Footer Content</p>
    </footer>
</body>

Now, make sure you give your footer a height.

Then use the calc() function to set the height of your wrapper equal to the height of the viewport (display), minus the height of the footer.

.wrapper {
    min-height: calc(100vh - 50px);
}
footer {
    height: 50px;
}

Now, if you have extra margins on your wrapper content you will have to increase the amount of pixels you subtract from the viewport height to reflect that. Other than that, this is a super easy and quick fix. No javascript needed, and only two CSS rules.

Sorbose answered 13/11, 2021 at 21:8 Comment(0)

The problem is simple to solve for anyone using Bootstrap 4 or higher, just include this snippet on your website:

<script>
     $(document).ready(function(){
         if ($('body').height() < $(window).height()) {
            $('footer').addClass('position-absolute bottom-0');
         } else {
            $('footer').addClass('position-static');
         }
     });
</script>

Here we check if the height of the BODY tag is less than the height of the browser window, if positive we place the footer at the bottom of the page and if negative we make the footer static and it will remain where it is. You don't need to change your current code, you just need to include this javascript in your page or package, remembering that to work the <body> tag must have position: relative, if you haven't changed the tag's "position" property in CSS <body>, you don't need to do anything as it is the default value.

Make sure to include the code after jquery, without jquery it won't work.
If you are not using the <footer> tag, you should change the $('footer') selector as appropriate.

Stewpan answered 9/12, 2021 at 12:34 Comment(0)

for me it didn't work until I removed the position: absolute

.footer {
    // position: absolute; // removed 
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
}

html, body {height: 100%;}

Note that the <footer /> element is inside the <body>

Netti answered 8/8, 2023 at 5:50 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Update 2021 - CSS GRID

Old Answer

HTML

CSS

Update 2021 - CSS GRID

Old Answer

Recommended topics

Hot tags