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

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

当前回答

我创建了一个非常简单的库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

其他回答

这些纯css解决方案与动态调整的内容正常工作(至少在firefox和Safari)例如,如果你有一个背景设置在容器div,页面,然后调整(添加几行)表内的div,表可以伸出的风格的底部区域,也就是说,你可以有一半的表在白色黑色主题和一半的表完成白色因为字体颜色和背景颜色是白色的。这基本上是无法修复的与meroller页面。

嵌套的div多列布局是一个丑陋的hack和100%最小高度的主体/容器div粘贴页脚是一个丑陋的hack。

我尝试过的唯一一个在所有浏览器上都可以工作的无脚本解决方案:一个更简单/更短的表，包含thead(用于标题)/tfoot(用于页脚)/tbody (td’s用于任意数量的列)和100%的高度。但这有语义和SEO的缺点(tfoot必须出现在tbody之前。尽管ARIA角色可能会帮助一些像样的搜索引擎)。

2011-02-28 04:35:38

一个快速简单的解决方案，使用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

很多人把这个简单问题的答案放在这里，但我有一件事要补充，考虑到我是多么沮丧，直到我弄清楚我做错了什么。

如前所述，最直接的方法是这样做。

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

body {
    background-color: transparent;
    position: static;
    height: 100%;
    margin-bottom: 30px;
}

.site-footer {
    position: absolute;
    height: 30px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

然而，post中没有提到的属性是body标签上的position: static，大概是因为它通常是默认的。相对位置无效!

我的wordpress主题覆盖了默认的主体显示，这让我困惑了很长一段时间。

2015-07-21 00:55:32

对于自然的页眉和页脚高度使用CSS Flexbox。

参见JS Fiddle。

HTML

<body>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>

CSS

html {
  height: 100%;
}

body {
  height: 100%;
  min-height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1;
  flex-shrink: 0;
}

header,
footer {
  flex: none;
}

2017-06-27 02:18:37

使用绝对定位和z-index创建一个粘脚div在任何分辨率，使用以下步骤:

创建一个脚注div, position: absolute;底部:0;以及期望的高度设置页脚的填充，以便在内容底部和窗口底部之间添加空白创建一个容器div，用position: relative包装主体内容;最小高度:100%; 为主内容div添加底部填充，它等于高度加上页脚的填充如果页脚被剪切，则设置页脚的z-index大于容器div

这里有一个例子:

<!doctype html> <html> <head> <title>Sticky Footer</title> <meta charset="utf-8"> <style> .wrapper { position: relative; min-height: 100%; } .footer { position: absolute; bottom:0; width: 100%; height: 200px; padding-top: 100px; background-color: gray; } .column { height: 2000px; padding-bottom: 300px; background-color: grxqeen; } /* Set the `html`, `body`, and container `div` to `height: 100%` for IE6 */ </style> </head> <body> <div class="wrapper"> <div class="column"> <span>hello</span> </div> <div class="footer"> <p>This is a test. This is only a test...</p> </div> </div> </body> </html>

2012-08-26 12:47:14

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

推荐文章

最新文章

标签