How to make footer always at the bottom

How to push a footer to the bottom of page when content is short or missing?

I have a page with an outer div that wraps a header, content and footer div. I want the footer div to hug the bottom of the browser, even when the content div is not tall enough to fill the viewable area (i.e. there’s no scrolling).

18 Answers 18

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

While this question is old, I want to improve slightly on the great answer by Luke Flournoy.

What I wanted was to have the footer be at the bottom of browser view ONLY IF the content was not long enough to fill up the browser window (non-sticky).

I was able to achieve by using the CSS function calc(). Which is supported by all modern browsers. You could use like:

Change 186 to the size of your footer.

Use a blank div with flex-grow:1 to fill unused spaced right before the footer.

Extract the styles to css as needed. This works by setting as display:flex;

I did what Jahmic up top did (won’t let me comment yet) except I had to use VH instead of % since I couldn’t just apply it to a container class.

You can do exactly what you want using Flexbox, as an example will be:

as a note the footer must be outside the content element

html structure will be something like follow:

To make it work responsively when the footer is taller on mobile devices compare to on desktop, you can’t really know the footer height. One way to do it is to stretch the footer out to cover the entire screen.

I Found this very simple way, just take the main container add min-height and make the footer sticky

There are great answer above, i think the problem is that nowadays most people whant to do this with some framework like React, Next or Vue, these frameworks add another element to wrap all the html rendered by the framework like divs with an id #root #__next so we have to aply the style to that element

I tried: http://jsfiddle.net/AU6yD/ as here it’s the best option but I had problems when the content of the

Try with this codepen.io/dendii/pen/LLPKJm media responsive

Another alternative if you want a main-wrapper to adjust the screen EqualHeight

I’ve solved same problem with jquery

I tried many style only solutions but none of them worked. This Javascript/Style solution works just fine for me, even with its odd mix of jQuery and GetElement.

How to add a footer which always shows up at the bottom of the page

How can I resolve this in such a way that there’s no gap between the end of content and footer?

6 Answers 6

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

In the new jquery, you can just use this:

Put everything before the footer in a div with position relative. This div will flex vertically to the content in it and will provide the buffer to keep anything after it right below it. No margin needed.

You also can put indexes. z-index: 1;

In your case, put z-index in css for footer at 10 or more.

So all you have to do to achieve what you want is add:

That’s it. It’ll be permanently aligned at the bottom. 🙂

Sticky footer. No javascript required:

After doing some fiddling I was reminded that absolute positioning removes the element from the document flow. You cannot depend on an absolute positioned element to affect the other elements because it will not. Because you do not know the height of the content then using margin-top is clearly not option.

So I came up with this: basically do a normal layout with floats then use position relative to move the items where you want them. This way the elements still affect the document flow, however, now you have total control over the position. This is precisely what relative positioning is for: You want total control over the position of an element but you still want they element to affect the layout normally.

Not the answer you’re looking for? Browse other questions tagged css or ask your own question.

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Help with footer always to bottom

I know this has been discussed here many times, but none of the answers I found here, seem to address my problem.

I have this variable (in height) layout, and wnat the footer to always stick to the bottom.

I have used the min-height: 100%; to the container div, and got it somehow to always be in the bottom. trouble is, it’s sinking too low to the bottom.

I’ve put an example here:

As you can see, my footer is at the bottom, but will go too far in the bottom, and even though there’s space on the page to display it, it’s creating a scroll bar.

Also, I’d like the main container to to be shown as big as the content is (i.e. closing the square), but right now, it looks like the container is going all the way to the bottom, and my footer is covering it.

What am I doing wrong there?

Thanks in advance

6 Answers 6

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

You should take a look at the link by Ben Lee again :). I have used that in your layout to achieve the effect you want. See it here: http://jsbin.com/erono3/2

The important thing is for the footer to be part of the container. The container has a min-height of 100%. So it occupies the whole screen always. The header is normal what ever it is inside.

The footer is absolutely positioned with a bottom:0px meaning it is always going to be at the bottom of the container (the container has to be position:relative ).

EDIT (in response to the comment)

How to make footer stick at the bottom of web page.

If you are new to web development and have created some HTML page before then you may be in a situation where you find that your footer is not at the bottom of page and there is white space at the bottom because there is not much content.

here is simple html code that produce this result which is not we want.

Exit fullscreen mode

As you can see there are not much content so my footer is not in the bottom of the page. Technically it is bottom of the page but our page is not long enough.

Solution

Setting body height

Exit fullscreen mode

We can set our body min height to 100vh that will make our page at least as long as screen height But it will not solve our problem.

Setting margin top on footer

Exit fullscreen mode

We can set margin-top on footer element that will make our footer to stay at the bottom of the page but when we have multiple pages and every page has different content length we have to set right amount of margin on every page one by one.

Using Flexbox

Using Flexbox in CSS we can fix it very easily with following steps.

Your CSS should look something like this.

Exit fullscreen mode

And the problem should be fixed.

Bonus: Align content vertically center

When you don’t have much content to fill the full height of screen like simple login form, you you may want to align your content vertically center.
To do this just remove margin top from footer and set margin top and bottom to auto margin: auto 0; on your main content (in my case article element) or margin: auto; to center it on both direction (vertically and horizontally) and it will make content align to center.

Your CSS should look something like this.

Fix footer to bottom of page

Although most pages on my site have enough content to push the footer to the bottom of the page for most people. I would like to know it’s always fixed to the bottom regardless of screen size from now on anyway.

I’ve tried a number of ways such as bottom: 0x; position:absolute: etc. Never seems to work very well, occasionally pushes the footer out of its container to fix to the bottom using some of those examples right there.

Included is the HTML and CSS for the two parts of the footer (footer & copyright bar). They’re both inside of a div anyway.

I removed my attempts at getting it to stick so people can have a look at it right now and see what the current code is to amend.

(It’s a resturant website. Don’t worry about the word ‘naked’).

14 Answers 14

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

For your footer :

We can use FlexBox for Sticky Footer and Header without using POSITIONS in CSS.

Note : Check browser supports for FlexBox. caniuse

Like this add position:fixed; and bottom:0; below the selector #footer :

CSS

Wrap the entire content before the footer in a div.

You can adjust min-height as you like based on how much of the footer you want to show in the bottom of the browser window. If set it to 90%, 10% of the footer will show before scrolling.

Here’s a simple CSS solution that’ll work:

This code working for me :

Important thing you should added bottom:0; and position: fixed;

I’ve found the sticky footer solution a bit painful on responsive sites, given that the height of your nav and footer can differ depending on the device. If you only care about working on modern browsers, you can accomplish your goal using a bit of Javascript.

If this is your HTML:

Then use this JQuery on every page:

Your footer element won’t inherently be fixed to the bottom of your viewport unless you style it that way.
So if you happen to have a page that doesn’t have enough content to push it all the way down it’ll end up somewhere in the middle of the viewport; looking very awkward and not sure what to do with itself, like my first day of high school.

You’ll find a similar problem with absolute positioning. And although it does take the element in question out of the natural flow of the document, it still won’t fix it to the bottom of the screen should you find yourself with a page that has little to no content to flesh it out.

Consider achieving this by: