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


291

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


我将添加到@Jimmy:您还需要对包含页脚的元素声明绝对(或相对)位置。在您的情况下,它是body元素。编辑:我用萤火虫在您的网页上对其进行了测试,它似乎工作得很好...
yoavf

可能哟需要拉伸的HTML页面到全高为这个链接说:makandracards.com/makandra/...
新浪网

Answers:


199

要获得页脚的粘性:

  1. 有一个<div>class="wrapper"你的内容。

  2. 收盘</div>的的wrapper地方 <div class="push"></div>

  3. 收盘</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 */
}

4
@jlp:您需要将form标签添加到height:100%语句中,否则它将破坏页脚。像这样:html,正文,表单{高度:100%;}
dazbradbury 2012年

我注意到在页脚中添加了填充螺钉,但是却发现可以通过从{footer,push}高度中减去页脚上的多余填充来解决此问题。
nicooga,2012年

1
该站点提供了有关该示例的详细说明:CSS Sticky Footer
mohitp 2013年

嘿,我按照您的步骤进行了,对于大页面来说效果很好。但是,在用户无法向下滚动页脚的小页面上,页面底部有些偏远。因此,它使几乎空白的页面可滚动。有人知道如何解决这个问题吗?您可以在这里看到我的测试页庇护-ecarpment-6887.herokuapp.com
Syk

1
@Syk我发现减小最小高度会有所帮助。94%是可以的值,但是您仍然会在移动设备上看到问题:(不确定此处是否有真正的解决方案
。– ACK_stoverflow

84

使用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%减去页眉和页脚的组合高度。

而已。

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

注意:

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

2)旧版本的IE(IE8-)和Android(4.4-)不支持视口单元。(

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

像这样:


4
这几乎是我在这里看到的最好的解决方案,即使在我很奇怪的情况下也可以使用。而且我猜想像Sass和变量一样,它可能会更加灵活。
themarketka 2014年

1
确实,这一作品就像一种魅力。对于不支持的浏览器,也易于回退。
Aramir

3
如何将绝对测量弄得一团糟呢?充其量来说,它也许不那么客气
乔纳森(Jonathan)

但是,如果页脚和页眉的高度是按百分比而不是px确定的?像页面高度的15%一样?
Fernanda Brum Lousada

3
视口单位在滚动或隐藏或显示地址栏(取决于滚动位置)的移动浏览器中并不总是能正常工作
Evgeny

57

粘页脚 display: flex

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

说明

该解决方案仅适用于

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

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

我们要充分利用也是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; }

13
我认为这是正确的答案,因为即使在不知道页脚高度的情况下,它实际上是唯一可行的方法。
fstanis

这使Neat 2
Halfacht

但是,为什么不使用菲利普·沃尔顿(Philip Walton)的解决方案本身呢?为什么要使用额外的“间隔”元素呢?
YakovL '18

@YakovL在Walton的solution .Site-content元素中扮演的角色相同spacer。只是被称为不同。
Gherman

@Gherman很好,在这个标记中.Site-content有一个类似物.content..但是没关系,我问gcedo是否对此有一些特定的想法,无需猜测
YakovL

30

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

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

我已经用类似的设置(两列+页脚)尝试了此操作,但它不起作用。
同构

14
如果内容增长,它将与内容重叠。
萨蒂亚·普拉卡什

1
这就是为什么内容底边空白。您必须将其设置为页脚的任何固定高度。
吉米

就其价值而言,如果某物为零值,则无关紧要的度量单位是什么,什么都不是什么,所以0px我所看到的所有样式表中的所有s都应该是just 0
乔纳森

如果页面的高度大于显示器的高度或页脚的内容长度是动态的,该怎么办?查看我的答案以解决此问题。
Ravinder Payal's

15

这是一个使用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 )

一种选择是在页脚之前添加一个“推” div。然后设置推杆div的高度。这避免了必须处理现有的保证金最高要求
Sarsaparilla

请参阅我的答案以获取无js解决方案。
费里特

11

将CSS设置#footer为:

position: absolute;
bottom: 0;

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

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


10
如果窗口太小,则此CSS会将页脚显示在内容的前面。
2015年

1
看到我的答案@Seichi

6

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


1
另一种方法是.content flex: 1 0 auto;使它可增长和不可缩放,但这margin-top: auto;是一个不错的技巧,涉及对页脚进行样式设置,而不是“无关的”样式.content。实际上,我想知道为什么在这种方法中需要使用
flex。– YakovL

@YakovL是的,这里的主要思想是页边距技巧;)我知道我可以制作这样的内容,但是它将与先前的答案几乎相同,后者的想法是通过内容推动页脚...而在这里我想避免这种情况,只用页边距推动页脚;)
Temani Afif 18-4-22

@YakovL flex是margin:auto必需的:)如果没有它,我们将无法使用... ...因为margin:auto与flex项目然后是块项目略有不同。如果将display:flex其删除将无法正常工作,那么您将具有正常的块元素流
Temani Afif 18'Apr

是的,我可以看到没有它就无法工作,但是我不明白为什么(“略有不同”)
YakovL

1
@YakovL很简单,使用普通的块元素,流始终是行方向,因此只有auto右边/左边的边距才起作用(就像著名margin:0 auto的居中块元素一样),但是我们没有任何列方向,所以没有边距自动带有顶部/底部。Flexbox同时具有行/列方向;)。这是微小的差异,但是在flexbox中也使用margin来对齐元素,因此即使在行方向上,您也可以使用margin-top / bottom auto垂直对齐..您可以在此处阅读更多内容:w3.org/TR/css- flexbox-1 /#auto-margins
Temani Afif 18-4-22

5

在此处输入图片说明

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/


2

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

html {
    position: relative;
}

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

footer {
    position: absolute;
    bottom: 0;
}

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


这对我有用,但是我在页脚中添加了width:100%。
Victor.Uduak '18

2

由于电网的解决方案尚未提交,这里是,只有两个声明父元素,如果我们把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>

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


1

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%。


1

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


1

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



0

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

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

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


0

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

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

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标记上的。位置相对将不起作用!

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


0

我知道一个旧线程,但是如果您正在寻找响应式解决方案,那么此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/response-jquery-sticky-footer/


0

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


0

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

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

0

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

0

对我来说,最好的显示方式(页脚)始终停留在底部,但始终没有覆盖内容:

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

1
这个语法正确吗?位置应该是固定的还是固定的?
隐身忍者

0

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

或者像我一样使用jQuery,然后将页脚高度设置为autofix,无论您喜欢什么,它都可以正常工作。此插件使用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>


Vanilla Java脚本的长度不如插件长。
Ravinder Payal'Mar

0

flex解决方案对我来说可以使页脚变粘,但不幸的是,更改正文以使用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/


0

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>


0

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

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;在页脚上即可。然后,我确保页脚是体内的最后一个元素。

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


-1

尝试在内容和侧边栏周围放置一个容器div(带有overflow:auto)。

如果那不起作用,您是否有任何屏幕截图或示例链接,其中页脚显示不正确?

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.