如何使页脚粘到底部并从页眉到页脚拉伸身体内容

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. 底部的黄色页脚粘在底部但不伸展到底部 整个页面，但保持在父母的DIV宽度，即85％？

Answer 1

在width: auto;中设置height: auto,和.pageContent，并在页脚中删除position: fixed;：http://jsfiddle.net/vdcmgune/

Answer 2

这是您正在寻找的解决方案吗？

http://jsfiddle.net/kmLb2dgj/

更新：这可能是您只能使用css / html获得的最佳解决方案

http://jsfiddle.net/kmLb2dgj/2/

Answer 3

看一下这个jQuery Sticky Footer。这是一个很好的简单解决方案。 （如果你没有使用Bootstrap，那就很好）

function ResizeContent() {

    //Height of the available content area is  Page Height - (Header and Footer height.
    //In this case 100px;
    var ContentHeight = Math.round($(window).height() - 100);
    ContentHeight = ContentHeight + "px";

    $("#MainContainer").css("min-height", ContentHeight);
};


$(function () {
    //Resize the content after page load or resize
     ResizeContent();

    window.onresize = function () {
            ResizeContent();
      };
 });


<div id="MainContainer" style="width:100%;">
    <div  class="panel panel-default" style="width:600px;margin-left:auto;margin-right:auto;margin-top:20px;">
       <div class="panel-heading">jQuery Sticky Footer</div>
           <div class="panel-body" style="text-align:center">
           jQuery to adjust the content area after the page loads, or resized
           <br /> <br />
           Try resizing this page and see the content  under this panel retain the same areas
           <br /> <br />       
         </div>
    </div>
</div>


<div id="Footer" style="background-color:#8A898A;color:#ffffff;width:100%;height:60px;text-align:center;padding:20px;">
    This is a sticky footer - <a style="color:white" href="http://www.surfthru.com">www.surfthru.com</a>
</div>

http://snippets.surfthru.com/html/JQStickyFooter.html