Keep footer at bottom but not sticky?

Question

My basic layout is simple:

header {
    background: red;
}

main {
    background: aqua;
    font-size: 48px;
}

footer {
    background: grey;
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 20px;
}

<header>head</header>
<main>
Curabitur aliquam convallis luctus. Vestibulum dolor turpis, consectetur a placerat eget, pellentesque id eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</main>
<footer>foot</footer>

If I make my footer position:fixed it does stay at the bottom of the page, but is a "sticky" footer and covered content when scrolling is needed.

I would like to keep the footer at the bottom, but not be fixed.

Is this even possible to do with pure CSS?

JSFiddle

[Something like this](http://stackoverflow.com/questions/12361029/how-can-i-get-a-sticky-footer-on-my-wordpress-theme/12361147#12361147) ? — The Alpha, Apr 26 '14 at 05:35

G-Cyrillus · Answer 1 · 2023-07-28T08:15:22.430

Nowadays, flex or grid will do easily:

grid:

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

body>* {
  padding: 0.5em;
  border: solid;
  margin: 2px;
}


/* does it push footer down  if  too tall  */

main:hover {
  padding-bottom: 100%;
}

<header>header</header>
<main>main</main>
<footer>footer</footer>

flex

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-flow: column;
}

main {
  flex-grow: 1;
}

body>* {
  padding: 0.5em;
  border: solid;
  margin: 2px;
}

/* does it push footer down if too tall  */

main:hover {
  padding-bottom: 100%;
}

<header>header</header>
<main>main</main>
<footer>footer</footer>

and for anyone curious or who loved the olden-days display:table/table-row (to use only if your browser doesn't support flexand/or grid or do not know size of footer while using another method with float or position):

body {
  margin: 0;
  height: 100vh;
  width: 100%;
  table-layout: fixed;
  display: table;
  border-spacing: 2px;
}

header > div,
footer > div {
  height: 0; /* will grow like a table*/
}

body>* {
  display: table-row;
}

body>*>div {
  display: table-cell;
  padding: 0.5em;
  border: solid;
  margin: 2px;
}

/* does it push footer down  if  too tall  */

main:hover > div {
  padding-bottom: 100%;
}

<header>
  <div>header</div>
</header>
<main>
  <div>main</div>
</main>
<footer>
  <div>footer</div>
</footer>

holly shananigan this was the only thing it worked for me! tks a bunch — Bernardo Dal Corno, Apr 24 '21 at 00:21
Just a heads up, the grid version seemed to be broken when I tried it, but flex still works great! — AaronTook, Jul 25 '23 at 00:54
@AaronTook , there is nothing wrong with the grid version as far i can test . I would even recommend to use the grid version , flex-flow:column has sometimes some bugs , like autoscroll when you set `column reverse` — G-Cyrillus, Jul 28 '23 at 08:12
@G-Cyrillus, that may simply have been an issue with the HTML I was combining the grid version with. That's probably my mistake, sorry for the confusion, and thanks for this very helpful answer! — AaronTook, Jul 29 '23 at 13:33

score 4 · Accepted Answer · answered Apr 26 '14 at 05:54

There is position:absolute;. This Is a CSS property that allows you to control the exact location of any element. For example:

<style>
footer {
position:absolute;
top:(numberofuntits)px;
left: (numberofUnits)px;
}

</style>

This makes it so no matter what happens to the page, it stays in place, kinda like fixed only more specific. Though I think what you will really need is position:relative; So it adjusts the footer relative to other elements on the page. To incorporate that, I've added some other useful styles you might want to consider adding... (found these on www.w3schools.com) I hope this is what you need:

 <style>
footer {
    clear: both; //prevents floating elements from right/left of footer
    position: relative; //Positions footer relative to other elements on hte page
    z-index: 1; //z-index positions elements in front or behind eachother, most have a //natual z-index of -1
    height: -3em; //exactly what it says...
    margin-top: 40em; //moves footer to bottom of all elements
}
</style>

Hope this Helps!

why 40em? for me it stays way bellow content, when page has to scroll to bottom — Bernardo Dal Corno, Apr 24 '21 at 00:13

score 0 · Answer 3 · answered Apr 26 '14 at 05:40

0

Easiest way with your code is to move your within the tag and remove position: fixed from your CSS code.

<header></header>
<main><footer></footer></main>

and in your CSS:

footer {
    background: grey;
    bottom: 0;
    width: 100%;
    padding: 20px;
}

answered Apr 26 '14 at 05:40

Duniyadnd

4,013
1
22
29

1

You should not put repeated content within `main`. As per W3C, "The main content area of a document includes content that is unique to that document and excludes content that is repeated across a set of documents such as site navigation links, copyright information, site logos and banners and search forms (unless the document or applications main function is that of a search form)." – Jani Hyytiäinen Apr 26 '14 at 05:48

score -1 · Answer 4 · answered Apr 26 '14 at 05:49

-1

Easy, change these:

body {
    position: relative;
}
footer {
    position:absolute;
    background-color: grey;
    bottom:0;
    width: calc(100% - 40px);
    padding: 20px;
}

Here is the FIDLLE

answered Apr 26 '14 at 05:49

Matheus

808
5
9

I don't think this is what he asked for – NicuVlad Jun 18 '17 at 19:26
This doesn't actually work, the footer is hiding some body content, not what the OP wanted. – Eric Sassaman Dec 22 '20 at 23:06

Keep footer at bottom but not sticky?

4 Answers4

Linked

Related