强制将两个页脚置于页面底部

问题描述 投票：0回答：4

我现在正在开发的网站有一个有趣的布局，我在 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
拉伸到页面底部，而不创建滚动条？

html css css-position footer
4个回答
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

0
投票

恐怕你应该使用javascript。这是我如何使用 jquery 做到这一点：

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

还有这里的小提琴

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/

0
投票

我认为这也有效。

一 二
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.