Question: I'm trying to display `footer` element always aligned to the bottom of the window, regardless of the content of page. 

The behaviour should be the following:

* when window is large and content doesn't fill all the available space, footer should be aligned at the bottom of the window (not attached to content)
* when window is narrow and content overflows, footer should be attached to the bottom border of the content and a vertical scrollbar relative to (header+content+footer) height should be displayed
* footer height should not be fixed, but it depends on footer content

I've found this tricky [**snippet**](https://stackoverflow.com/questions/6029102/align-an-element-to-the-bottom-of-window) 

```
#element-align {
    position: fixed;
    bottom: 0;
}

```

but I don't think it's proper in my case: when I resize window, footer height changes and I can't compensate it with a `padding-bottom` value on content. If height exceeds padding, content is hidden under footer. Here's my current [**jsFiddle**](http://jsfiddle.net/utg0sbv1/3/). 

Any ideas? Thanks!

Answer: 
Ok, I think I got it. You want the footer to stay fixed at the bottom, except when the page shrinks... then the footer must be right bellow the content when it scrolls... right?

It requires a few tricks:

* Put the `footer` inside the `section`, for it will be controlling the size. You will need to change the `footer` from `position: fixed` to `position: absolute`.
* Then, set the `section` to have a calculated `min-height`, so when the page is heigher it will expand to the bottom. Like:

`min-height: calc(100% - 60px - 70px); /* full height minus header and footer */`

Here's a fiddle: <http://jsfiddle.net/utg0sbv1/10/>

**EDIT**

Here's a non javascript, also css2 friendly solution:

You can set the content and footer to act like a table, then they'd be both relative to each other's height. It only requires that you wrap the content and footer to a div, that will be a `display: table;`. The content and footer will be `display: table-row`, and you will need to nest a child div inside each one of them to act as the `table-cell`.

Doing that, the content will always expand to the bottom, for the wrapper div is a full height, and the bottom will scroll down with the content when the page shrinks, no matter what is the footer's height!

Check here: <http://jsfiddle.net/utg0sbv1/12/>
I think I've found the trick! 

Basing on [LcSalazar answer](https://stackoverflow.com/questions/25410174/align-element-to-bottom-of-window/25410633#25410633), I've created a table layout.

```
html, body {
    margin:0px;
    padding:0px;
    border:0px;
    height:100%;
    width:100%;
}

body {
    display:table;
}

header,footer {
    background:#000;
    color:#fff;
    display:table-row;
}

.content {
    display:table-row;
    background:lightgreen;
    height:100%;
}

```

[**jsFiddle**](http://jsfiddle.net/2u5wsa0b/)

By setting content `height:100%;`, when window is large content fills all the available space and pushes header to top and content to bottom. 

Ok, someone could claim it's not exactly the OP because `header` is no longer fixed positioned. But I think it's a good start point in that case too... without javascript! :-)

Hope it helps someone.