CSS固定标题，流畅内容，固定标题响应布局

Question

我目前正在研究CSS布局技术，以实现如下图所示的布局

<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>

我试过

• 固定poistion
• calc
• 绝对位置

但我想知道设计CSS布局的新方法

有没有其他方法可以实现上图所示的布局？

解决

被修改的 这就是我想要的

http://jsfiddle.net/danield770/DVAcV/9/

Answer 1

必须使用position: absolute;。

HTML：

<div class="Wrapper">
    <div class="Header">header</div>
    <div class="Content">Content</div>
    <div class="FooterPush"></div>
</div>
<div class="Footer">Footer</div>

<强> CSS：

* {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
}
.Header {
    background:blue;
    height:50px
}
.Content {
    overflow:auto;
    position: absolute;
    width:100%;
    top:50px;
    bottom:50px;
}
.Wrapper {
    min-height: 100%;
}
.Wrapper .FooterPush {
    height: 50px;
}
.Footer {
    clear: both;
    position: relative;
    margin-top: -50px;
    height: 50px;
    background:red;
}

Demo Here