What to do when website's "too short" and there's an empty space below footer?

Question

Introduction

I've seen many, many, great websites made by best front-end developers but there's this issue on most (if not all) of the sites having footers. What's the best, cross-browser, technique that keeps footer in the right place?

Cool "header - content - footer" layout:

Layout - OK

Broken layout (happens when site's "too short"):

Layout - Broken :(

Everything is usually fine on smaller screens, but this is pretty frequent in 1680x1050 or FullHD resolutions.

Partial fixes

absolute positioning of the footer, but this will only move the gap above the footer, to the content section, what looks better in many cases, but still sucks.
creating really long footers but let's assume in this case we want it to have height of 20 pixels only.
changing body { background: to the color of the footer will make it look less uglish, but the gap will be there, still.
probably some JavaScript tricks like getting window's height and changing position/size of some elements, but sounds like an overkill.

Working fixes

Looks like it's still the best to make sites long enough to fit even the biggest screens (well, pretty obvious).

Does this issue have any name? I couldn't find anything on SO and I'm sure people were asking this question before. Do you have any ideas how to handle this problem, maybe there are some smart fixes, tricks that I'm not aware of?

Thanks!

There's no problem with absolute / fixed positioning the footer and setting minimum height on the content. It's a well laid out and presented post but I don't think it's actually a problem. — SpaceBeers, Mar 30 '12 at 13:58
Does this answer your question? [How to push a footer to the bottom of page when content is short or missing?](https://stackoverflow.com/questions/4575826/how-to-push-a-footer-to-the-bottom-of-page-when-content-is-short-or-missing) — Jakub Kukul, Jun 07 '20 at 18:54

Jakub Kukul · Answer 1 · 2022-10-15T15:24:20.103

Way 1: Using flexbox

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

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

Way 2: Adjusting the size of (non-footer) container with `calc()`:

Assuming you want a fixed-size footer of size 50px:

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

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

score 2 · Answer 2 · answered Mar 30 '12 at 14:13

2

apply the css to the content section :

#content{
    min-height:600px;
}

answered Mar 30 '12 at 14:13

Sujit Agarwal

12,348
11
48
79

The problem with this approach is that it's not very responsive. What if the vertical resolution of a screen is a lot higher than 600px? A sticker would still not be at the bottom of a page – Jakub Kukul Jun 09 '20 at 16:42

score 1 · Answer 3 · answered Dec 25 '20 at 08:51

1

You can do it with absolute positioning:

#footer {
  position: absolute;
  width: 100%;
  bottom: 0;
}

Or another more complex way is to use javascript and set the Footer's margin-top to body height - all element's height

answered Dec 25 '20 at 08:51

Mateja

271
1
11

score 0 · Answer 4 · answered Dec 25 '20 at 08:33

0

which means 100% of view height

<div class="container" style="min-height: 100vh;">
</div>

answered Dec 25 '20 at 08:33

kin

139
2
6

score 0 · Answer 5 · edited Mar 27 '22 at 14:10

0

You can make the height of the footer the window height minus the height of your application.

example in react.js

let footerHeight = window.innerHeight - 678 /*my "too short" application height*/;

<footer style={{height: footerHeight }}>
</footer>

Now the background will grow depending on the extra space.

edited Mar 27 '22 at 14:10

Tyler2P

2,324
26
22
31

answered Mar 27 '22 at 12:59

Shalom Ber Kohn

1

user1302302 · Answer 6 · 2012-03-30T14:28:31.570

0

Make the footer have this as CSS:

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

Markup:

<div class="container">
<div class="footer">...</div>
</div>

That will position at the bottom. If you want space, add a margin on the bottom (margin-bottom: xxxpx;).

edited Mar 30 '12 at 14:28

answered Mar 30 '12 at 14:22

user1302302

14
6