Full height content block width sticky footer

Question

Problem is trivial (I am sure there must be plenty of solutions, but can't find proper one myself (honestly))

I need simple header->content->footer page, like this

<div class="container">
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</div>

Where header footer is sticky to botom (not fixed position, if there is no content it's on bottom, if there is, It must move depending on content block height.

What I've tried

header and footer are absolute with top and bottom properties, content have padding from top and bottom same as header and footer height but it doesn't work as I want to.

Jsfiddle example: https://jsfiddle.net/xwjhn7ej/

@Alexis your footer doesn't stick to the bottom when there's no content. — hungerstar, Jun 22 '16 at 14:28
@Paulie_D since the duplicate you close uses `flexbox` as a solution will be better if you ask OP first if that support is an option. I think with the comment of Pangloss was enough to point OP that solution and wait if he can use it ... also that answer has always the footer visible that wasn't a requirement from OP — DaniP, Jun 22 '16 at 14:50
The dupe has 3 different options not just flexbox...that's why it's a dupe. — Paulie_D, Jun 22 '16 at 15:00
Right but **always the footer visible** isn't a requirement ... — DaniP, Jun 22 '16 at 15:03
I'd say it IS a requirement... *"if there is no content, it's on bottom"* — Paulie_D, Jun 22 '16 at 15:08

DaniP · Accepted Answer · 2016-06-22T14:35:55.393

1

You are so close ... just need to change the value from height , what you need is to set the min-height :

.container {
     min-height: 100%;

Updated Fiddle

Bonus:

To keep the content all visible you can use padding on the container = to the height of your footer and header:

    .container {
        min-height: 100%;
        background:red;
        width:1280px;
        margin:0 auto;
        position: relative;

        /*Use box-sizing to include the values of the padding on the 100% min-height*/
        box-sizing:border-box;
        /*Padding for bottom and top = to the height of your elements footer-header*/
        padding: 135px 0;
    }

2nd Demo Fiddle

edited Jun 22 '16 at 14:35

answered Jun 22 '16 at 14:28

DaniP

37,813
8
65
74

But text must not be over header and footer :/ – Itsmeromka Jun 22 '16 at 14:31
@Nerfair no problem mate let me edit to suit that requirement, I don't see it on the question – DaniP Jun 22 '16 at 14:32

jazibobs · Answer 2 · 2016-06-22T15:05:53.690

1

Based on your fiddle you can could try the following:

.container {
    /* height: 100%; - remove this*/
    min-height: 100vh;

   ...
}

Then add appropriate padding to the top and bottom of the content depending on the height of your header and footer.

edited Jun 22 '16 at 15:05

answered Jun 22 '16 at 14:29

jazibobs

422
2
10
20

score 1 · Answer 3 · answered Jun 22 '16 at 14:33

1

.container {
  min-height: 100%;
}
.content {
  padding-top: 135px; // height of the header
  padding-bottom: 135px; // height of the footer
}

JSFiddle

answered Jun 22 '16 at 14:33

max

8,632
3
21
55

Full height content block width sticky footer

3 Answers3

JSFiddle