html - 如何使页脚贴在底部并将正文内容从页眉拉伸(stretch)到页脚

Question

我有以下 ASP.net 代码:

<div class="pageContent">
    <div style="width: 85%; text-align: center; margin: 0 auto;">
        <div class="headerContent brClear">
            ZSasdasdassad
        </div>
        <div class="bodyContent brClear">
            <asp:ContentPlaceHolder ID="BodyPlaceHolder" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div class="footerContent brClear">
            asdasdads
        </div>
    </div>
</div>

CSS:

.pageContent
{
    width: 100%;
    height: 100%;
    text-align: center;
    margin: 0 auto;
    position: relative;
}
.brClear
{
    clear: both;
}
.headerContent
{
    width: 100%;
    height: 165px;
    background: #ffd800;
}
.bodyContent
{
    width: 100%;
    height: 550px;
    background: #f00
}
.footerContent
{
    width: 100%;
    height: 120px;
    background: #ffd800;
    position: fixed;
    bottom: 0;
}

100% 显示:

以 70% 显示:

如何修改 CSS 以便:

1. 红色正文内容从顶部黄色标题的末尾延伸一直到页面底部，底部填充大小为页脚，以便没有任何内容被阻止？
2. 底部黄色页脚紧贴底部但不拉伸(stretch)到整个页面，但保持在父级 DIV 宽度的 85% 以内？

Answer 1

在 .pageContent 中设置 width: auto; 和 height: auto, 并去掉 position: fixed; 在页脚中:http://jsfiddle.net/vdcmgune/