Sticky footer till document height greater than viewport

Question

EDIT

Incorrectly marked as a duplicate, I marked it duplicate before I tested the answer on the referred question. It doesn't provide the exactly what I want, which is a sticky footer initially and only float to the bottom of the page when the content is larger than the viewport.

/EDIT

EDIT2

Found the answer over here, pure CSS and does exactly what I want.

/EDIT2

I want a sticky footer until the document height is greater than the viewport height, then it just should be at the end of the document.

The document is build up like this:

<body>
    <div class="header">
        <!-- content -->
    </div>
    <div class="page-content">
        <!-- content -->
    </div>
    <div class="footer">
        <!-- content -->
    </div>
</body>

Fiddle

The .header has a height of 101px and .footer has a height of 173px.

.page-content has a variable height depending on the content.

What I want is for .footer to stick to the bottom of the viewport as long as .page-content doesn't contain enough content for the document to have a greater height than the viewport

I tried giving .page-content a min-hieght so it always overflows the viewport but that is just plain ugly.

Is this possible pure CSS or does Javascript/JQuery come in to play here?

and sorry as m not getting your point but what about min-height? — Leo the lion, Jul 02 '15 at 08:57
@Leothelion what about min-height? Thought about setting a min-height for `.page-content` so it always overflows the viewport but that is just plain ugly — Liam de Haas, Jul 02 '15 at 09:01
Incorrectly marked as duplicate. The referened question does not take into consideration that the OP wants the footer to stick at the bottom of the viewport initially and only float to the bottom of the page when the content is larger then the viewport. — Damien Overeem, Jul 02 '15 at 09:17
@DamienOvereem I marked it as duplicate because i thought that wwas exactly what I wanted, after that tried it and appears it is not. I should check if it is the solution before marking it next time — Liam de Haas, Jul 02 '15 at 09:21
@DamienOvereem, have you looked at the answer? it does exactly that - it starts the footer at the bottom of the page and then if the content is larger than the page, it keeps the footer at the bottom of the content. Even the OP has marked this as duplicate — Pete, Jul 02 '15 at 09:55
@Pete how is it then that if I implement it exactly like that it doesn't do exactly that? The footer is always further down, even if the document height is smaller than the viewport height? — Liam de Haas, Jul 02 '15 at 09:57
@Pete no, as stated in the answer of the referred question I had `html, body {min-height:100%; padding:0; margin:0;}` in my css — Liam de Haas, Jul 02 '15 at 10:01
@Pete, tried it again, didn't work (again) maybe my question is ever so slightly different that it doesn't work — Liam de Haas, Jul 02 '15 at 10:06
@Pete the `min-height` in the `body`? That is what the answer says to use... — Liam de Haas, Jul 02 '15 at 10:07
So you want the footer to be at the bottom if there is not enough content: http://jsfiddle.net/naqE6/1097/. and then stay at the bottom if there is enough content: http://jsfiddle.net/naqE6/1098/? Or are you wanting the footer to just sit at the bottom of the viewport all the time? — Pete, Jul 02 '15 at 10:09
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/82184/discussion-between-liam-de-haas-and-pete). — Liam de Haas, Jul 02 '15 at 10:11

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

Two relatively newer methods that can be used are using calc and flexbox. Both have decent support (above 90% without prefixes for calc and with prefixes for flexbox). Using them is pretty simple, especially compared to some of the older (and admittedly more supported) methods. If you really want to push support then viewport units can make them even simpler.

Method One - Calc:

CSS:

/* Only needed if not using vh in main */
html, body {
  height: 100%;
}

header {
  /* Needs to be static */
  height: 70px;
}

footer {
  /* Needs to be static */
  height: 30px;
}

main {
  /* Can use 100vh instead of 100% */
  min-height: calc(100% - 70px - 30px);
}

HTML:

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

DEMO: codepen

Method Two - Flexbox:

CSS:

body {
  display: flex;
  flex-direction: column;
  /* If using percent then html needs a height of 100% */
  min-height: 100vh;
}

main {
  flex: 1;
}

HTML:

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

DEMO: codepen

The flexbox version is nice because header and footer can be fluid. The flex: 1; in main makes sure that main will fill any remaining space left after header and footer take whatever they need. Calc's version is less powerful, requiring a static header and footer, but no prefixes. They both work fine for me, personally, with either autoprefixer or prefixfree making sure I don't have to worry about prefixes either way.

score 1 · Answer 2 · edited Mar 08 '17 at 14:22

1

You are probably looking for something like Ryan Faits "HTML 5 Sticky Footer"

CSS:

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -4em;
}
.footer, .push {
  height: 4em;
}

HTML:

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Footer Content here</p>
        </div>
    </body>
</html>

In this example the footer will be 4em high. You will probably want to adjust this to your wishes by modifying the "margin"of the ".wrapper"and the "footer" "height"

edited Mar 08 '17 at 14:22

Kiee

10,661
8
31
56

answered Jul 02 '15 at 09:03

Damien Overeem

4,487
4
36
55

He can also do `min-height: calc(100% - heightOfFooter(4em))` instead of `margin: 0 auto -4em` depending on which browsers OP wants to support. – Joel Almeida Jul 02 '15 at 09:07
How do i do this with a header in there too? – Liam de Haas Jul 02 '15 at 09:19

score 0 · Answer 3 · answered Jul 02 '15 at 09:01

0

You can use this css to your footer to make it at the bottom of viewport.

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 173px;
}

answered Jul 02 '15 at 09:01

Ranjith S

205
1
5

2

But if he has more content than the viewport it will overlap content. I think OP doesn't desire that. – Joel Almeida Jul 02 '15 at 09:02
We can add the z index property to some higher value than the z index of page content. That should work. – Ranjith S Jul 02 '15 at 09:08
@JoelAlmeida, not if this is positioned absolutely to the body which has 100% height and add 173px bottom padding – Pete Jul 02 '15 at 09:10
We are not adding any bottom padding 173px. – Ranjith S Jul 02 '15 at 09:13

Praveen Kumar Purushothaman · Answer 4 · 2015-07-02T09:11:45.930

Check this out:

$(function () {
  $(".large-content").hide();
  $("a").click(function () {
    $(".large-content").toggle();
    fixHeight();
  });
  fixHeight();
});

function fixHeight() {
  if ($(window).height() >= $(document).height())
    $("body").addClass("fixed-footer");
  else
    $("body").removeClass("fixed-footer");
}

* {font-family: 'Segoe UI'; font-size: 10pt; margin: 0; padding: 0; list-style: none;}
p {margin: 0 0 10px;}
.header, .footer {text-align: center; color: #fff; background-color: #000;}
body.fixed-footer {padding-bottom: 2em;}
body.fixed-footer .footer {position: fixed; width: 100%; bottom: 0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="header">
  Header Section
</div>
<div class="page-content">
  <p>Small Content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat aliquam error quas culpa, sapiente sunt asperiores impedit ipsa cupiditate tempore, molestias, vitae laboriosam suscipit pariatur odit? Cumque fugiat iste provident.</p>
  <p><a href="#">Click for large content!</a></p>
  <div class="large-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
  </div>
</div>
<div class="footer">
  Footer Section
</div>

I personally would not suggest enforcing the use of jquery just for adding a sticky footer.. If jquery is available in the project already then sure, but otherwise I would stick with a css solution. — Damien Overeem, Jul 02 '15 at 09:11
Seems like a bit of overkill for something that can be achieved through css — Pete, Jul 02 '15 at 09:12
@Pete I am unable to get a CSS solution that does exactly this! — Praveen Kumar Purushothaman, Jul 02 '15 at 09:13
@PraveenKumar there are many ways to do this with css: http://stackoverflow.com/questions/23651942/css-single-column-layout-centered-fixed-width-100-height-w-header-and-footer/23657083#23657083 — Pete, Jul 02 '15 at 10:18

Sticky footer till document height greater than viewport

4 Answers4

Method One - Calc:

Method Two - Flexbox:

Linked