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

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

当前回答

我没有任何运气在这一页上建议的解决方案，但最后，这个小技巧成功了。我将把它作为另一种可能的解决方案。

footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

2017-06-21 17:09:38

其他回答

在我的网站上，我总是使用:

position: fixed;

.．.在我的CSS页脚。将它固定在页面底部。

2021-06-03 20:45:33

大多数答案使用固定值的css。虽然它可能工作，但当页脚更改时，需要调整页脚大小的固定值。另外，我使用的是WordPress，不想打乱WordPress主题为你定义的页脚大小。

我用一点javascript解决了这个问题，只在需要时触发。

    var fixedFooter = false;
    document.addEventListener("DOMContentLoaded", function() {fixFooterToBottom();}, false);
    window.addEventListener("resize", function() {fixFooterToBottom();}, false);
    function fixFooterToBottom()
    {
        var docClientHeight = document.documentElement.clientHeight;
        var body = document.querySelector("body");
        var footer = document.querySelector("footer");

        fixedFooter = fixedFooter ? (body.clientHeight  + footer.clientHeight ) < docClientHeight :  body.clientHeight < docClientHeight;
        footer.style.position = fixedFooter ? "fixed" : "unset";
        footer.style.left = fixedFooter ? 0 : "unset";
        footer.style.right = fixedFooter ? 0 : "unset";
        footer.style.bottom = fixedFooter ? 0 : "unset";
    }

2022-12-21 19:07:12

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

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

2017-11-25 18:34:59

div.fixed { 位置:固定; 底部:0; 右:0; 宽度:100%; 边框:3px实体#73AD21; ｝ <身体风格= "高度:1500 px”> < h2 >:固定;< / h2 > <p>一个位置为固定的元素;相对于视口的位置，这意味着即使页面被滚动，它也始终保持在相同的位置:</p> < div class = "固定" > 这个div元素的位置为:fixed; < / div > 身体< / >

2018-12-25 03:17:50

一个快速简单的解决方案，使用flex

将html和body的高度设置为100%

html,
body {
  width: 100%;
  height: 100%;
}

将主体显示为具有列方向的flex:

body { 
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

为main添加flex-grow: 1

main {
  flex-grow: 1;
}

flex-grow指定应将伸缩容器中剩余空间的多少分配给项(伸缩增长因子)。

*, *::after, *::before{ margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; } body { min-height: 100%; display: flex; flex-direction: column; } main { flex-grow: 1; } footer{ background-color: black; color: white; padding: 1rem 0; display: flex; justify-content: center; align-items: center; } <body> <main> <section > Hero </section> </main> <footer > <div> <p > © Copyright 2021</p> </div> </footer> </body>

2021-11-16 11:35:18

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

推荐文章

最新文章

标签