CSS Layout: Footer at bottom OR end of page (if further down)

Question

I know, this kind of questions has been asked a lot, but somehow the correct answer is always eluding me...

Ok, I've got two things I want:

A footer that's always on the bottom of the page, no matter if the content has less height than the available screen or more.
The content above the footer should fill the rest of the screen - or use more space, if needed

The first part is quite easy, for example, here, with something like this...

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
}

No problem there. But how can I get the content above the .footer element to fill the remaining space? height=100%; obviously doesn't work;

Anyone got an idea how to realize a layout with...

A fixed header
A footer at the bottom of the screen (or below, if the content needs more height than that)
A content that fills the available screen or uses more, if needed

(The reason is that in the end, I want a grid with flexible height that fills the screen in the content)

Have you checked this [Question](http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page)? — Mohammad Usman, Jan 23 '17 at 13:19
Thanks. I would prefer something more compatible to older browsers, but perhaps it will have to do. — Florian Schaetz, Jan 23 '17 at 13:27

score 0 · Answer 1 · answered Jan 23 '17 at 13:25

header {
    width: 100%;
    position: fixed;
    background-color: #9f0d0d;
    color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    min-height: 5%;
}

    header :first-child {
        vertical-align: middle;
        margin-top: auto;
        margin-bottom: auto;
    }

article {
    top: 55px;
    width: 100%;
    height: 90%;
    position: fixed;
}

footer {
    top: 95%;
    min-height: 5%;
    width: 100%;
    position: fixed;
    padding: 10px 15px;
    background-color: #9f0d0d;
    color: #f5f5f5;
    border-top: 1px solid #ddd;
}

<div>
  <header>HEADER</header>
  <article>CONTENT</article>
  <footer>FOOTER</footer>
</div>

Feel Free to play with this code block.

CSS Layout: Footer at bottom OR end of page (if further down)

1 Answers1