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

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

当前回答

带有显示的粘性页脚: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

其他回答

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

保持<main>为min-height 90vh将永远解决您的问题。下面是基本结构，它将帮助您遵循语义并覆盖整个页面。

第一步:除了页眉和页脚，所有内容都放在主标签内。

<body>
    <header>
        <!╌ nav, logo ╌> 
    </header>
    <main>
        <!╌ section and div ╌> 
    </main>
    <footer>
        <!╌ nav, logo ╌>
    </footer>
</body>

步骤2:添加min-height: 90vh为主

main{
    min-height: 90vh;
}

通常，页眉和页脚的最低高度是70px，所以这种情况下工作良好，尝试和测试!

2022-08-11 18:51:25

要获得一个粘性页脚:

为你的内容设置一个<div> with class="wrapper"。在包装器的</div>结束之前放置 < div class = "推" > < / div >。在包装器的</div>结束后放置 < div class = "脚注" > < / 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 */
}

2008-09-03 18:55:18

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

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

2017-11-25 18:34:59

大多数答案使用固定值的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

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

推荐文章

最新文章

标签