Question

我现在正在处理的网站有一个有趣的布局，我在CSS中遇到问题时遇到了麻烦。页眉和页脚跨越浏览器窗口的整个宽度，内容限制在960px宽的块中 - 但是在此960px内容块中有一个辅助“内部”页脚。主页脚和此“内部”页脚都需要位于页面底部。这是网站的标记，被剥离到功能单元：

<html>
    <body>
        <header></header>
        <section id="content">
            MAIN CONTENT
            <section id="internal-footer"></section>
        </section>
        <footer></footer>
    </body>
</html>

CSS如下：

html{margin:0;padding:0;min-height:100%;height:100%;}
body{margin:0;padding:0;min-height:100%;position:relative;}
header{width:100%;}
footer{width:100%;height:XXXpx;position:absolute;bottom:0;left:0;}
#content{width:960px;margin:0 auto;position:relative;padding-bottom:(XXX+YYY)px;}
#internal-footer{width:100%;height:YYYpx;position:absolute;bottom:0;left:0;padding-bottom:XXXpx;}

I created a JSFiddle here (adding background colors and borders, and reducing the width of the content) to demonstrate the issue I'm having.

当内容充足时，一切都按预期运作。当内容不足时，#content部分不会伸展，内部页脚不仅会被抬起，而且由于底部填充太高。当然，太高不是一个严重的问题，因为我可以在背景图像上设置no-repeat，没有人是明智的。

那么当没有足够的内容时，如何在不创建滚动条的情况下强制#content拉伸到页面底部？

Answer 1

如下所示更改HTML和CSS是否有助于实现您的目标？现在内部页脚位于页脚内部并且也居中。

<footer>
        <section id="internal-footer"></section>
</footer>



#internal-footer{width:300px;padding-bottom:50px!important;background-color:#990;height:50px;margin:-50px auto 0 auto;}

我正在使用工作小提琴手复制您的评论，以便人们可以轻松找到解决方案

我已经解决了第二个问题 - 页脚内容正在移动。首先，我必须删除内页脚上的负底边距（边距：-137px自动0自动）然后我必须添加一个与页脚填充相等的版权p的边距。更新您的答案以合并修复程序，我可以接受它。这是最后的，有效的，小提琴：jsfiddle.net/M72fn

Answer 2

我担心你应该使用javascript。以下是我将如何使用jquery：

$(document).ready(function(){
    if(($(window).height()-100)>$('#content').height()){
        $('#content').height($(window).height()-200);
    }
});

and the fiddle here

Answer 3

您的内容区域必须是可用高度的100％。这可以通过绝对定位header（因为你有页脚），然后使用填充使#content 100％高，以允许页眉和页脚来完成：

header {width:100%;position:absolute;top:0;left:0;...}
#content {display:block; min-height:100%; padding:50px 0 100px 0; ...}

http://jsfiddle.net/Ds5tX/3/

强制两个页脚到页面底部

3 个答案: