HTML 高度和页脚

Question

我在让 website to look the way I want it to. I have a footer that I want to have at the bottom of the page (but does not stick to the bottom of the viewport if the content is large). The current situation is almost fine, though I want the body and html tag to take up 100% of the viewport if the content is small. If I add height: 100%; to the html and body tags, the home page looks fine but the members page 在页面中间某处显示页脚时遇到了一些问题，因为 html 和 body 标签的高度似乎与我的视口大小相匹配而不是内容。页脚具有 color-footer class（您可以通过浏览器的开发人员工具动态更改 css 规则来自行验证）。

OAS：该站点由外部开发并在 Joomla 上运行。我不是网络开发人员，我只是因为试图让它工作而感到头疼。我浏览了很多指南，但这次 Google 似乎无法提供简单的解决方案。在使用 chrome 开发人员模式进行数小时干预后，我无法让它工作，所以我想知道是否有人可以找出正确的 css 规则添加到我的样式表中，以便我获得所需的行为.

Answer 1

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

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

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

希望对您有所帮助。

Answer 2

如果您无法通过 css 固定页脚位置，您可以使用 javascript 设置页脚位置，但也可以通过 CSS 固定。

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

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

Answer 3

一个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();
});

HTML 高度和页脚

HTML heights and a footer

html

css

vertical-alignment