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

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

当前回答

使用绝对定位和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

其他回答

带有显示的粘性页脚:flex

解决方案的灵感来自菲利普沃尔顿的粘性页脚。

解释

此解决方案仅在以下情况下有效:

Chrome≥21.0 Firefox浏览器≥20.0 Internet Explorer浏览器≥10 Safari≥6.1

它基于伸缩显示，利用了flex-grow属性，该属性允许元素在高度或宽度上增长(当流动方向分别设置为列或行时)，以占用容器中的额外空间。

我们还将利用vh单位，其中1vh被定义为:

视口高度的1/100

因此，100vh的高度是告诉一个元素跨越整个视口高度的简洁方法。

这是你如何组织你的网页:

----------- body -----------
----------------------------

---------- footer ----------
----------------------------

为了让页脚固定在页面底部，您希望正文和页脚之间的空间增加到将页脚推到页面底部所需的大小。

因此我们的布局变成:

----------- body -----------
----------------------------

---------- spacer ----------
                             <- This element must grow in height
----------------------------

---------- footer ----------
----------------------------

实现

身体{ 保证金:0; 显示:flex; flex-direction:列; 最小高度:100 vh; ｝ .spacer { flex: 1; ｝ /*为演示的目的使它可见*/ .footer { 高度:50 px; 背景颜色:红色; ｝身体< > <div class="content">Hello World!< / div > < div class = "隔离" > < / div > <页脚类=“页脚”> < /页脚> 身体< / >

你可以在JSFiddle玩。

Safari怪癖

请注意，Safari对flex-shrink属性的实现有缺陷，该属性允许项缩小到显示内容所需的最小高度以上。要解决这个问题，你必须在上面的例子中显式地将.content和页脚的flex-shrink属性设置为0:

.content {
  flex-shrink: 0;
}

.footer {
  flex-shrink: 0;
}

或者，将spacer元素的flex样式更改为:

.spacer {
  flex: 1 0 auto;
}

这种3值简写样式相当于以下完整设置:

.spacer {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}

优雅的工作无处不在。

2015-12-08 01:23:17

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

我自己有时也与此斗争，我总是发现所有这些div在彼此之间的解决方案是一个混乱的解决方案。我只是胡乱摆弄了一下，我个人发现这是有效的，而且这当然是最简单的方法之一:

html {
    position: relative;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

footer {
    position: absolute;
    bottom: 0;
}

我喜欢这样做的原因是不需要应用额外的HTML。您可以简单地添加这个CSS，然后编写您的HTML

2017-07-10 21:16:05

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

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

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为:

position: absolute;
bottom: 0;

然后，您需要在#边栏和#内容的底部添加填充或边距，以匹配#footer的高度，或者当它们重叠时，#footer将覆盖它们。

此外，如果我没记错的话，IE6在底部有一个问题:0 CSS。你可能不得不为IE6使用JS解决方案(如果你关心IE6的话)。

2008-09-03 19:01:58

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

推荐文章

最新文章

标签