0

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

<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;}

我在这里创建了一个 JSFiddle（添加背景颜色和边框，并减少内容的宽度）来演示我遇到的问题。

当有足够的内容时，一切都会按预期进行。当没有足够的内容时，该#content部分没有被拉伸并且内部页脚不仅被抬起，而且由于底部填充它太高了。当然，太高不是一个严重的问题，因为我可以只设置no-repeat背景图像，没有人更聪明。

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

4

3 回答 3

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 auto 0 auto），然后我必须为版权 p 添加一个边距，等于页脚填充。更新您的答案以包含修复程序，我可以接受。这是最终的工作小提琴：jsfiddle.net/M72fn

于 2013-11-11T14:22:14.727 回答
0

恐怕你应该使用javascript。以下是我将如何使用 jquery 执行此操作：

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

和这里的小提琴

于 2013-11-11T14:27:20.853 回答
0

您的内容区域需要是可用高度的 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/

于 2013-11-11T14:37:52.823 回答