css

Question

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

score 210 · Accepted Answer

要获得粘性页脚：

为您的内容添加一个<div>with class="wrapper"。
就在</div>这个wrapper地方关闭之前<div class="push"></div>。
就在</div>这个wrapper地方关闭之后<div class="footer"></div>。

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

score 103 · Accepted Answer

使用 CSS vh 单位！

使用粘性页脚最明显和最简单的方法可能是使用新的css 视口单元。

以下面的简单标记为例：

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

如果 header 是 80px 高，而 footer 是 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，您可以使用负边距和使用 box-sizing 填充来解决这个问题 -

像这样：

* {
    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>

score 76 · Accepted Answer

粘性页脚`display: flex`

受Philip Walton 的粘性页脚启发的解决方案。

解释

此解决方案仅适用于：

铬≥21.0
火狐≥20.0
Internet Explorer ≥ 10
野生动物园≥6.1

它基于flexdisplay，利用该flex-grow属性允许元素在高度或宽度上增长（当设置为任一或分别时），以占用容器中的额外空间。flow-directioncolumnrow

我们还将利用该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属性显式设置为 0.content和 the ：footer

.content {
  flex-shrink: 0;
}

.footer {
  flex-shrink: 0;
}

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

.spacer {
  flex: 1 0 auto;
}

这种 3 值速记样式等效于以下完整设置：

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

优雅地工作无处不在。

score 30 · Accepted Answer

您可以使用position: absolute以下方法将页脚放在页面底部，但然后确保您的 2 列具有适当的margin-bottom，以便它们永远不会被页脚遮挡。

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

score 14 · Accepted Answer

这是一个使用 jQuery 的解决方案，就像一个魅力。它检查窗口的高度是否大于主体的高度。如果是，则它会更改页脚的顶部边距以进行补偿。在 Firefox、Chrome、Safari 和 Opera 中测试。

$( function () {

    var height_diff = $( window ).height() - $( 'body' ).height();
    if ( height_diff > 0 ) {
        $( '#footer' ).css( 'margin-top', height_diff );
    }

});

如果您的页脚已经有一个顶部边距（例如 50 像素），您需要将最后一部分更改为：

css( 'margin-top', height_diff + 50 )

score 11 · Accepted Answer

将 CSS 设置#footer为：

position: absolute;
bottom: 0;

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

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

score 7 · Accepted Answer

与@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>

score 3 · Accepted Answer

我自己有时也为此苦苦挣扎，我总是发现所有这些 div 相互之间的解决方案是一个混乱的解决方案。我只是弄乱了一点，我个人发现这是可行的，而且它肯定是最简单的方法之一：

html {
    position: relative;
}

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

footer {
    position: absolute;
    bottom: 0;
}

我喜欢的是不需要应用额外的 HTML。你可以简单地添加这个 CSS，然后像任何时候一样编写你的 HTML

score 2 · Accepted Answer

由于尚未提出Grid解决方案，因此如果我们认为and是理所当然的，那么它只有两个父元素声明：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

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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% 的上边距。

score 1 · Accepted Answer

对于这个问题，我看到的许多答案都很笨拙，难以实施且效率低下，所以我想我会试一试并提出我自己的解决方案，这只是一点点 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 计算出页脚仍位于底部的页面可以达到的最小高度，希望这对某些人有所帮助:)

score 1 · Accepted Answer

div.fixed {
   position: fixed;
   bottom: 0;
   right: 0;
   width: 100%;
   border: 3px solid #73AD21;
}

<body style="height:1500px">

   <h2>position: fixed;</h2>

   <p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>

   <div class="fixed">
      This div element has position: fixed;
   </div>

</body>

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

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

唯一适用于我尝试过的所有浏览器的非脚本解决方案：一个更简单/更短的表格，带有thead（用于页眉）/tfoot（用于页脚）/tbody（td 用于任意数量的列）和 100% 高度。但这有明显的语义和 SEO 缺点（tfoot 必须出现在 tbody 之前。ARIA 角色可能有助于体面的搜索引擎）。

score 0 · Accepted Answer

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

如前所述，最直接的方法就是这样..

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 标签上的position: static 。相对位置不起作用！

我的 wordpress 主题已经覆盖了默认的正文显示，这让我困惑了很长时间。

score 0 · Accepted Answer

jQuery 跨浏览器自定义插件 - $.footerBottom()

或者像我一样使用 jQuery，并将您的页脚高度设置为auto或fix，无论您喜欢什么，它都会起作用。此插件使用 jQuery 选择器，因此要使其工作，您必须将 jQuery 库包含到您的文件中。

这是您运行插件的方式。导入jQuery，复制这个自定义jQuery插件的代码，导入jQuery后导入即可！它非常简单和基本，但很重要。

当你这样做时，你所要做的就是运行这段代码：

$.footerBottom({target:"footer"}); //as html5 tag <footer>.
// You can change it to your preferred "div" with for example class "footer" 
// by setting target to {target:"div.footer"}

无需将其放在文档就绪事件中。它将运行良好。当页面加载和窗口调整大小时，它将重新计算页脚的位置。

这是您不必了解的插件的代码。只知道如何实现它。它为您完成工作。但是，如果您想知道它是如何工作的，只需查看代码即可。我给你留下了评论。

//import jQuery library before this script

// Import jQuery library before this script

// Our custom jQuery Plugin
(function($) {
  $.footerBottom = function(options) { // Or use "$.fn.footerBottom" or "$.footerBottom" to call it globally directly from $.footerBottom();
    var defaults = {
      target: "footer",
      container: "html",
      innercontainer: "body",
      css: {
        footer: {
          position: "absolute",
          left: 0,
          bottom: 0,
        },

        html: {
          position: "relative",
          minHeight: "100%"
        }
      }
    };

    options = $.extend(defaults, options);

    // JUST SET SOME CSS DEFINED IN THE DEFAULTS SETTINGS ABOVE
    $(options.target).css({
      "position": options.css.footer.position,
      "left": options.css.footer.left,
      "bottom": options.css.footer.bottom,
    });

    $(options.container).css({
      "position": options.css.html.position,
      "min-height": options.css.html.minHeight,
    });

    function logic() {
      var footerOuterHeight = $(options.target).outerHeight(); // Get outer footer height
      $(options.innercontainer).css('padding-bottom', footerOuterHeight + "px"); // Set padding equal to footer height on body element
      $(options.target).css('height', footerOuterHeight + "!important"); // Set outerHeight of footer element to ... footer
      console.log("jQ custom plugin footerBottom runs"); // Display text in console so ou can check that it works in your browser. Delete it if you like.
    };

    // DEFINE WHEN TO RUN FUNCTION
    $(window).on('load resize', function() { // Run on page loaded and on window resized
      logic();
    });

    // RETURN OBJECT FOR CHAINING IF NEEDED - IF NOT DELETE
    // return this.each(function() {
    //   this.checked = true;
    // });
    // return this;
  };
})(jQuery); // End of plugin


// USE EXAMPLE
$.footerBottom(); // Run our plugin with all default settings for HTML5

/* Set your footer CSS to what ever you like it will work anyway */
footer {
  box-sizing: border-box;
  height: auto;
  width: 100%;
  padding: 30px 0;
  background-color: black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- The structure doesn't matter much, you will always have html and body tag, so just make sure to point to your footer as needed if you use html5, as it should just do nothing run plugin with no settings it will work by default with the <footer> html5 tag -->
<body>
  <div class="content">
  <header>
    <nav>
      <ul>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
      </ul>
    </nav>
  </header>

  <section>
      <p></p>
      <p>Lorem ipsum...</p>
    </section>
  </div>
  <footer>
    <p>Copyright 2009 Your name</p>
    <p>Copyright 2009 Your name</p>
    <p>Copyright 2009 Your name</p>
  </footer>

score 0 · Accepted Answer

我知道一个旧线程，但是如果您正在寻找响应式解决方案，这个 jQuery 添加将有所帮助：

$(window).on('resize',sticky);
$(document).bind("ready", function() {
   sticky();
});

function sticky() {
   var fh = $("footer").outerHeight();
   $("#push").css({'height': fh});
   $("#wrapper").css({'margin-bottom': -fh});
}

完整指南可以在这里找到：https ://pixeldesigns.co.uk/blog/responsive-jquery-sticky-footer/

score 0 · Accepted Answer

我创建了一个非常简单的库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/库更好的解决方案。

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

弹性盒解决方案

Flex 布局是自然页眉和页脚高度的首选。这个 flex 解决方案在现代浏览器中进行了测试，并且在 IE11 中确实有效:)。

请参阅 JS 小提琴。

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

score 0 · Accepted Answer

对我来说，最好的显示方式（页脚）是贴在底部但不一直覆盖内容：

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

score 0 · Accepted Answer

flex 解决方案在使页脚变得粘滞方面对我有用，但不幸的是，将 body 更改为使用 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/的回复中得到了这个

score 0 · Accepted Answer

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

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%;and position: relative;，然后position: absolute; bottom: 0; left: 0;在页脚上。然后我确保页脚是正文中的最后一个元素。

让我知道这是否对其他人不起作用，以及为什么。我知道这些乏味的风格黑客在我没有想到的各种情况下会表现得很奇怪。

score 0 · Accepted Answer

反应友好的解决方案 - （不需要间隔 div）

Chris Coyier（著名的 CSS-Tricks 网站）已将他在 Sticky-Footer上的页面保持在最新状态，现在至少有五种方法可以创建粘性页脚，包括使用 FlexBox 和 CSS-Grid。

为什么这很重要？因为，对我来说，我多年来使用的较早/较旧的方法不适用于 React——我不得不使用 Chris 的 flexbox 解决方案——它既简单又有效。

下面是他的CSS-Tricks flexbox Sticky Footer - 看看下面的代码，它不可能更简单。

（（下面的）StackSnippet 示例没有完美地呈现示例的底部。页脚显示为超出屏幕底部，这在现实生活中不会发生。）

html,body{height: 100%;}
body     {display:flex; flex-direction:column;}
.content {flex: 1 0 auto;} /* flex: grow / shrink / flex-basis; */
.footer  {flex-shrink: 0;}

/* ---- BELOW IS ONLY for demo ---- */
.footer{background: palegreen;}

<body>
  <div class="content">Page Content - height expands to fill space</div>
  <footer class="footer">Footer Content</footer>
</body>

Chris 还为喜欢网格的人演示了这个CSS-Grid 解决方案。

参考：

CSS-Tricks - Flexbox 完整指南

score 0 · Accepted Answer

查看http://1linelayouts.glitch.me/示例 4。Una Kravets 解决了这个问题。

这将创建一个带有页眉、主页和页脚的 3 层页面。

- 您的页脚将始终停留在底部，并使用空间来适应内容；

- 您的标题将始终保持在顶部，并使用空间来适应内容；

- 如果需要，您的 main 将始终使用所有可用的剩余空间（剩余空间的一部分），足以填满屏幕。

HTML

<div class="parent">
  <header class="blue section" contenteditable>Header</header>
  <main class="coral section" contenteditable>Main</main>
  <footer class="purple section" contenteditable>Footer Content</footer>
</div>

.parent {
  display: grid;
  height: 95vh; /* no scroll bars if few content */
  grid-template-rows: auto 1fr auto;
}

score 0 · Accepted Answer

刚刚发明了一个非常简单的解决方案，对我很有用。您只需将除页脚之外的所有页面内容包装在一个 div 中，然后将 min-height 设置为视点的 100% 减去页脚的高度。无需在页脚或多个包装器 div 上进行绝对定位。

.page-body {min-height: calc(100vh - 400px);} /*Replace 400px with your footer height*/

score 0 · Accepted Answer

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

position: fixed;

...在我的 CSS 中作为页脚。这将其锚定到页面底部。

score 0 · Accepted Answer

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

给出html和body的高度100%

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

flex以column方向显示主体：

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

添加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 > &copy; Copyright 2021</p>
        </div>
    </footer>
</body>

score -1 · Accepted Answer

尝试在内容和侧边栏周围放置一个容器 div（带有溢出：自动）。

如果这不起作用，您是否有任何页脚未正确显示的屏幕截图或示例链接？

css - 如何让页脚留在网页底部？

30 回答 30

使用 CSS vh 单位！

粘性页脚display: flex

解释

执行

Safari 怪癖

弹性盒解决方案

反应友好的解决方案 - （不需要间隔 div）

参考：

HTML

CSS

Related

Reference

粘性页脚`display: flex`