Question

我在查看website看起来像我想要的方式时遇到了一些麻烦。我想在页面底部有一个页脚（但如果内容很大，则不会粘在视口的底部）。目前的情况几乎没问题，但如果内容很小，我希望body和html标签占据视口的100％。如果我加高度：100％;对于html和body标签，主页看起来很好但是 members page在页面中间某处显示页脚，因为html和body标签的高度似乎与我的视口大小而不是内容。页脚具有color-footer类（您可以通过浏览器的开发人员工具动态更改css规则来自行验证）。

OAS：这个网站是由外部开发的，并在Joomla上运行。我不是网络开发人员，我只是因为试图让它工作而感到头疼。我已经浏览了十几个指南，但看起来这次谷歌无法给我简单的解决方案。在使用chrome干预开发人员模式几个小时之后，我无法让它工作，所以我想知道是否有人能够找出正确的css规则添加到我的样式表中，以便我得到所需的行为。

Answer 1

JavaScript / jQuery解决方案：

function CheckFooterPos() {
    var Footer = $('.color-footer');
    var BottomOfScroll = $('html').scrollTop() + $(window).height();
    var BottomOfFooter = Footer.offset().top + Footer.height();
    if (BottomOfFooter < BottomOfScroll) {
        Footer.css('bottom', '-' + (BottomOfScroll - BottomOfFooter) + 'px');
    } else {
        Footer.css('bottom', '0px');
    }
}

$(document).ready(function() {
    $(window).scroll(function(){
        CheckFooterPos();
    });
    $(window).resize(function(){
        CheckFooterPos();
    });
    CheckFooterPos();
});

Answer 2

因为它是position:absolute所以，它会在屏幕中间显示。

从position: absolute;删除.color-footer {即可解决您的问题。

.color-footer {
    bottom: 0;
    height: 66px;
    margin-top: 50px;
    padding-top: 0;
    width: 100%;
//    position: absolute; //remove it.
}

希望它有所帮助。

Answer 3

如果你无法通过css修复其位置，你可以使用javascript设置页脚位置，尽管它也可以通过CSS。

http://josephfitzsimmons.com/simple-sticky-footer-using-jquery/

我想 How to keep footer at the bottom even with dynamic height website 这也可以帮到你。

HTML高度和页脚

3 个答案: