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％显示：

enter image description here

以70％显示：

enter image description here

如何修改CSS以便：

红色的身体内容从顶部黄色标题的末尾延伸一直到页面底部的填充底部大小页脚所以什么都没有被阻止？
底部的黄色页脚粘在底部但不伸展到底部整个页面，但保持在父母的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

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

3 个答案: