.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%;
}
<div class="outer">
<div class="content">
<div class="inner"></div>
</div>
</div>
http://jsfiddle.net/L8H9J/
1)内部クラスからmargin-bottomスタイルを削除します
2)内部クラス内に追加するすべてのコンテンツは、下部に揃えられます
3)HTMLでのドキュメントのフローのため、明示的に下部に揃えることはできません
4)このトリックを使用してこれを行うことができますが、内部クラス内のすべての要素は次のフローになりますposition:static
5)JavaScriptを使用して、内部クラス内の各要素に適切なマージンを決定します。
ヒント: 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:
