footer 하단영역에 고정시키기

컨텐츠 영역 상관없이 footer가 하단에 붙게하려면 position:fixed를 하는 방법이 있지만 이건 하단고정이긴 한데..
위에 뜬 형태이기도 하면서 컨텐츠가 없든 많던간에 원하는 모습이 보여지지 않는다.
그래서 방법이 아래와 같다.

HTML 마크업:

<div id="wrap">
    <div id="header">Header</div>
    <div id="body">
        <div id="container">Contents</div>
    </div>
    <div id="footer">Footer</div>
</div>

CSS:

html, body { margin:0; padding:0; height:100%; }
#wrap {
    height:100%;
    color:#fff;
}
#header {
    position:relative;
    width:100%;
    height:45px;
    background-color:#FD428E;
}
#body {
    margin:-45px 0 -50px;
    width:100%;
    min-height:100%;    
    background-color:#24C3FF;
}
#body #container {
    padding:45px 0 50px;
}

#footer {
    width:100%;
    height:50px;
    background-color:#ff0000;
}