如何使页脚停留在网页的底部？

CSS

小小

2020-03-23

我有一个简单的2列布局，带有页脚，可清除标记中的右和左div。我的问题是我无法在所有浏览器中都将页脚停留在页面底部。如果内容将页脚放下，它会起作用，但并非总是如此。

第3073篇《如何使页脚停留在网页的底部？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共19个回答

Mandy村村 2020.03.23

如果您不希望使用固定位置，并且不喜欢在移动设备上关注它，那么到目前为止，这似乎对我有用。

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%;和position: relative;，然后position: absolute; bottom: 0; left: 0;在页脚上即可。然后，我确保页脚是体内的最后一个元素。

让我知道这是否对其他任何人无效，以及原因。我知道这些乏味的风格骇客会在我从未想到的各种情况下表现异常。

小胖Gil 2020.03.23

对我而言，最好的显示方式（页脚）始终停留在底部，但始终没有覆盖内容：

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

十三泡芙猿 2020.03.23

Flexbox解决方案

对于自然的页眉和页脚高度，首选使用Flex布局。此flex解决方案已在现代浏览器中经过测试，并且在IE11中实际上可以运行:)。

参见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;
}

小卤蛋 2020.03.23

许多人在这里提出了这个简单问题的答案，但是我要补充一件事，考虑到在弄清楚自己做错了什么之前我感到多么沮丧。

如前所述，最简单的方法是这样。

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;
}

但是，在职位中未提及的属性（可能是因为通常是默认属性）可能是位置： body标记上的static。位置相对将不起作用！

我的wordpress主题已覆盖默认的正文显示，并且使我困惑了很长时间。

村村 2020.03.23

我创建了一个非常简单的库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 Media Queries，但是您必须为不同大小的屏幕手动编写不同的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 /库更好的解决方案。

猴子 2020.03.23

之前，我对本页面上建议的解决方案没有任何运气，但最终，这个小技巧成功了。我将其作为另一个可能的解决方案。

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

神奇Itachi 2020.03.23

这些纯CSS解决方案都不能与动态调整内容大小（至少在firefox和Safari上）正常工作，例如，如果在容器div，页面上设置了背景，然后在div内调整表的大小（添加几行），表格可以伸出样式区域的底部，即，您可以让一半的桌子以白色为黑色主题，另一半的桌子为全白色，因为字体颜色和背景颜色均为白色。使用themeroller页面基本上无法修复。

嵌套的div多列布局是一个丑陋的技巧，而用于粘贴页脚的100％最小高度的主体/容器div是一个丑陋的技巧。

我尝试过的所有浏览器上唯一可用的无脚本解决方案：一个更简单/更短的表，其中带有thead（用于页眉）/ tfoot（用于页脚）/ tbody（td用于任意数量的列）和100％的高度。但是，这已经感觉到语义和SEO的劣势（必须在肢体之前先出现。ARIA角色可能会帮助体面的搜索引擎）。

猴子村村 2020.03.23

对于这个问题，我看到的许多答案都是笨拙的，难以实现且效率低下的，所以我想我会尝试一下，并提出自己的解决方案，该解决方案只包含少量的CSS和HTML

html,
body {
  height: 100%;
  margin: 0;
}
.body {
  min-height: calc(100% - 2rem);
  width: 100%;
  background-color: grey;
}
.footer {
  height: 2rem;
  width: 100%;
  background-color: yellow;
}

<body>
  <div class="body">test as body</div>
  <div class="footer">test as footer</div>
</body>

这可以通过设置页脚的高度，然后使用css calc计算出页脚仍在底部时页面的最小高度来起作用，希望这对某些人有所帮助：)

GO梅逆天 2020.03.23

CSS：

  #container{
            width: 100%;
            height: 100vh;
            }
 #container.footer{
            float:left;
            width:100%;
            height:20vh;
            margin-top:80vh;
            background-color:red;
            }

HTML：

           <div id="container">
               <div class="footer">
               </div>
           </div>

如果您要在页面底部查找一个响应页脚，这应该可以解决问题，页脚始终保持视口高度的80％。

GO 2020.03.23

使用绝对定位和z-index通过以下步骤以任何分辨率创建粘性页脚div：

创建具有position: absolute; bottom: 0;和所需高度的页脚div
设置页脚的填充以在内容底部和窗口底部之间添加空格
创建一个div包装身体内容的容器position: relative; min-height: 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: green; }
     /* 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>

西里神无Pro 2020.03.23

index.html：

<!DOCTYPE html>

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>

</html>

main.css：

#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}

资料来源：https : //www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/

NearGreen 2020.03.23

由于电网的解决方案尚未提交，这里是，只有两个声明的父元素，如果我们把height: 100%和margin: 0理所当然：

html, body {height: 100%}

body {
  display: grid; /* generates a block-level grid */
  align-content: space-between; /* places an even amount of space between each grid item, with no space at the far ends */
  margin: 0;
}

.content {
  background: lightgreen;
  /* demo / for default snippet window */
  height: 1em;
  animation: height 2.5s linear alternate infinite;
}

footer {background: lightblue}

@keyframes height {to {height: 250px}}

<div class="content">Content</div>
<footer>Footer</footer>

align-content: space-between

物品沿着横轴均匀地分布在对齐容器内。每对相邻项目之间的间距是相同的。第一项与主边缘齐平，最后一项与主边缘齐平。

斯丁前端 2020.03.23

一种解决方案是设置盒子的最小高度。不幸的是，IE（惊奇）似乎没有很好地支持它。

小卤蛋 2020.03.23

我有时为此感到挣扎，我总是发现彼此之间所有这些div之间的解决方案是一个混乱的解决方案。我只是把它弄乱了一点，我个人发现这可行，它当然是最简单的方法之一：

html {
    position: relative;
}

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

footer {
    position: absolute;
    bottom: 0;
}

我喜欢的是不需要应用任何额外的HTML。您只需添加此CSS，然后随时编写HTML

猪猪 2020.03.23

与@gcedo相似的解决方案，但无需添加中间内容即可压下页脚。我们可以简单地添加margin-top:auto到页脚中，无论页脚的高度或上面内容的高度如何，都将其推到页面底部。

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin:0;
}

.content {
  padding: 50px;
  background: red;
}

.footer {
  margin-top: auto;
  padding:10px;
  background: green;
}

<div class="content">
  some content here
</div>
<footer class="footer">
  some content
</footer>

神乐阿飞 2020.03.23

粘页脚 `display: flex`

解决方案灵感来自Philip Walton的粘性页脚。

说明

此解决方案仅适用于：

铬≥21.0
Firefox≥20.0
Internet Explorer≥10
Safari≥6.1

它是基于上flex显示，利用在flex-grow属性，它允许一个元件生长在任一高度或宽度（当flow-direction被设置为column或row分别地），以占据容器中的额外的空间。

我们要充分利用也是vh单元，其中1vh被定义为：

视口高度的1/100

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

这是构造网页的方式：

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

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

为了使页脚贴在页面底部，您希望主体和页脚之间的空间增加到将页脚推到页面底部所需的距离。

因此，我们的布局变为：

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

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

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

实作

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.spacer {
    flex: 1;
}

/* make it visible for the purposes of demo */
.footer {
    height: 50px;
    background-color: red;
}

<body>
    <div class="content">Hello World!</div>
    <div class="spacer"></div>
    <footer class="footer"></footer>
</body>

您可以在JSFiddle中使用它。

Safari怪癖

请注意，Safari 对flex-shrink属性的实现有缺陷，该属性使项目缩小的幅度超过了显示内容所需的最小高度。要解决此问题，您必须在上述示例flex-shrink中将.content和的属性显式设置为0 footer：

.content { flex-shrink: 0; }
.footer  { flex-shrink: 0; }

乐泡芙 2020.03.23

使用CSS vh单位！

进行粘性页脚处理的最明显，最简单的方法可能是利用新的CSS视口单元。

以下面的简单标记为例：

<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>

如果页眉的高度为80px，页脚的高度为40px，则可以使用内容div上的一条规则来制作粘性页脚：

.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
}

这意味着：让内容div的高度至少为视口高度的100％减去页眉和页脚的组合高度。

而已。

* {
    margin:0;
    padding:0;
}
header {
    background: yellow;
    height: 80px;
}
.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
    background: pink;
}
footer {
    height: 40px;
    background: aqua;
}

<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>

...这是相同的代码如何处理内容div中的许多内容：

* {
    margin:0;
    padding:0;
}
header {
    background: yellow;
    height: 80px;
}
.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
    background: pink;
}
footer {
    height: 40px;
    background: aqua;
}

<header>header goes here</header>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
<footer>
    This is my footer
</footer>

注意：

1）必须知道页眉和页脚的高度

2）旧版本的IE（IE8-）和Android（4.4-）不支持视口单元。（犬）

3）从前，Webkit在calc规则内的视口单位存在问题。这确实是固定的（请参阅此处），所以那里没有问题。但是，如果出于某些原因要避免使用calc，则可以使用负边距和框大小填充来解决该问题-

像这样：

* {
    margin:0;padding:0;
}
header {
    background: yellow;
    height: 80px;
    position:relative;
}
.content {
    min-height: 100vh;
    background: pink;
    margin: -80px 0 -40px;
    padding: 80px 0 40px;
    box-sizing:border-box;
}
footer {
    height: 40px;
    background: aqua;
}

<header>header goes here</header>
<div class="content">Lorem ipsum 
</div>
<footer>
    This is my footer
</footer>

LGil 2020.03.23

将CSS设置#footer为：

position: absolute;
bottom: 0;

然后，您需要在底部添加padding或，以匹配或重叠时的高度，以覆盖它们。margin#sidebar#content#footer#footer

另外，如果我没记错的话，IE6的bottom: 0CSS 也有问题。您可能必须对IE6使用JS解决方案（如果您关心的是IE6）。

米亚 2020.03.23

您可以使用position: absolutefollowing将页脚放在页面底部，但是请确保您的2列具有适当的位置，margin-bottom以使它们永远不会被页脚遮挡。

#footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
}
#content, #sidebar { 
    margin-bottom: 5em; 
}

相似问题

基于react18+vite4+zustand网页端仿微信聊天实例

0 回答

基于tauri+vite4+pinia跨端后台管理系统应用

0 回答

HTML5 Drag与Drop 拖动时更改图标/光标

5 回答

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

25 回答

基于tauri+vue3跨端聊天应用|tauri仿微信模板

0 回答

Ace Editor一款比较好用的展示代码组件

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android

Flexbox解决方案

粘页脚 display: flex

说明

实作

Safari怪癖

使用CSS vh单位！

粘页脚 `display: flex`