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: 
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.
may be you want this.. please try this....

```
#content
{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -100px; /* Negative indent footer by it's height */
}
#push,#footer{height:100px;}

```

visit demo here: with more content: <http://jsfiddle.net/gyvrk0vk/5/>

with less content: <http://jsfiddle.net/a0cu6qqc/2/>

thank you..