如何让页脚保持在网页的底部?

我有一个简单的2列布局，带有一个脚注，可以清除标记中的左右div。我的问题是，我不能让页脚留在所有浏览器的页面底部。如果内容向下推页脚，它就会起作用，但情况并不总是如此。

当前回答

对我来说，最好的显示它(页脚)的方式是粘在底部，但不覆盖所有的内容:

#my_footer {
    position: static
    fixed; bottom: 0
}

2017-11-25 18:34:59

其他回答

flex解决方案对我来说是有效的，因为它使页脚变得有粘性，但不幸的是，将页面主体改为使用flex布局会使我们的一些页面布局发生变化，而且不是更好的。最后对我有用的是:

    jQuery(document).ready(function() {

    var fht = jQuery('footer').outerHeight(true);
    jQuery('main').css('min-height', "calc(92vh - " + fht + "px)");

});

我从ctf0在https://css-tricks.com/couple-takes-sticky-footer/的回复中得到了这个

2018-08-30 23:46:32

保持<main>为min-height 90vh将永远解决您的问题。下面是基本结构，它将帮助您遵循语义并覆盖整个页面。

第一步:除了页眉和页脚，所有内容都放在主标签内。

<body>
    <header>
        <!╌ nav, logo ╌> 
    </header>
    <main>
        <!╌ section and div ╌> 
    </main>
    <footer>
        <!╌ nav, logo ╌>
    </footer>
</body>

步骤2:添加min-height: 90vh为主

main{
    min-height: 90vh;
}

通常，页眉和页脚的最低高度是70px，所以这种情况下工作良好，尝试和测试!

2022-08-11 18:51:25

我创建了一个非常简单的库https://github.com/ravinderpayal/FooterJS

它使用起来很简单。在包含库之后，只需调用这行代码。

footer.init(document.getElementById("ID_OF_ELEMENT_CONTAINING_FOOTER"));

页脚可以通过使用不同的参数/id调用上面的函数来动态更改。

footer.init(document.getElementById("ID_OF_ANOTHER_ELEMENT_CONTAINING_FOOTER"));

注意:-你不必改变或添加任何CSS。库是动态的，这意味着即使屏幕在加载页面后调整大小，它也会重置页脚的位置。我创建了这个库，因为CSS解决了这个问题，但当显示的大小发生显著变化时，从台式机到平板电脑或反之亦然，它们要么重叠的内容，要么不再保持粘性。

另一种解决方案是CSS媒体查询，但你必须为不同大小的屏幕手动编写不同的CSS样式，而这个库自动工作，并由所有基本的JavaScript支持浏览器支持。

编辑 CSS解决方案:

@media only screen and (min-height: 768px) {/* or height/length of body content including footer*/
    /* For mobile phones: */
    #footer {
        width: 100%;
        position:fixed;
        bottom:0;
    }
}

现在，如果显示的高度超过你的内容长度，我们将使页脚固定在底部，如果不是，它将自动出现在显示的最后，因为你需要滚动来查看它。

而且，它似乎是一个比JavaScript/库更好的解决方案。

2016-09-12 11:43:02

如果你不希望它使用位置固定，并在移动设备上烦人地跟随你，这似乎对我来说是有效的。

html {
    min-height: 100%;
    position: relative;
}

#site-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 6px 2px;
    background: #32383e;
}

只需要将html设置为min-height: 100%;位置是相对的，位置是绝对的;底部:0;左:0;在页脚。然后确保页脚是主体中的最后一个元素。

如果这对其他人不起作用，请告诉我，以及为什么。我知道这些乏味的风格技巧在我没有想到的各种情况下会表现得很奇怪。

2019-11-16 15:04:47

一个解决方案是为盒子设置最小高度。不幸的是，IE似乎并没有很好地支持它(意外)。

2008-09-03 18:55:54

如何让页脚保持在网页的底部?

推荐文章

最新文章

标签