Align all content with the bottom of the page?

Question

I\'m trying to align a html-page with the bottom of the browser-window. This is my apporach:

Answer 1

.outer {
    position:absolute;
    height:100%;
    width:100%;
    background-color:#aaaaaa;
    margin:0;
    padding:0;
}
.content {
    position:relative;
    width:90%;
    height:90%;
    background-color:#444444;
    margin:5%;
}
.inner {
    position:absolute;
    height:20%;
    width:100%;
    background-color:#eeeeee;
    bottom:0;
    margin-bottom:10%;
}

---

---

http://jsfiddle.net/L8H9J/

1) Remove the margin-bottom style from the inner class

2) All the content you add inside the inner class will be aligned with the bottom

3) Because of the flow of the document in HTML, you cannot explicitly align them with the bottom

4) You can use this trick to do so, but again all elements inside the inner class will be with flow of position:static

5) There comes the use of JavaScript to determine suitable margins for each element inside the inner class

Tip: Use percentages; although you want the wrapper to be of height ~950px, but if you can use percentages for the dimensions, you would really love watching your web applications scale with the browsers: