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

Bill the Lizard 280 html css footer sticky-footer

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

更新:

它在Firefox中无法正常工作.当页面上没有足够的内容将页脚一直向下推到浏览器窗口的底部时,我在页脚下方看到一条背景颜色条.不幸的是,这是页面的默认状态.

Staale.. 194

要获得粘性页脚:

  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 */
}

  • 它在带有<form>标签的asp.net中不起作用 (8认同)
  • @jlp:您需要将表单标记添加到高度:100%语句,否则它将破坏粘性页脚.像这样:html,body,form {height:100%;} (4认同)

Danield.. 75

使用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-)不支持视口单元.(caniuse)

3)曾几何时,webkit在计算规则中的视口单元出现问题.这确实已经修复(见这里)所以那里没有问题.但是,如果您因某些原因希望避免使用计算机,则可以使用负边距和使用框大小填充来解决这个问题 -

像这样:

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

  • 这几乎是我在这里看到的最好的解决方案,甚至在我的奇怪情况下工作,.content的一些内容溢出到页脚中,因为谁知道什么原因.而且我想像Sass和变量一样,它可能会更加灵活. (3认同)
  • 如何搞乱绝对测量仍然不是很困难?充其量它可能*少*hacky (3认同)
  • 视频单元并不总是在移动浏览器上按预期工作,隐藏或显示地址栏取决于滚动位置 (2认同)

gcedo.. 49

粘性页脚 display: flex

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

说明

此解决方案仅适用于:

  • 铬≥21.0
  • Firefox≥20.0
  • InternetExplorer≥10
  • Safari≥6.1

它基于flex显示,利用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,.contentfooter在上面的示例中:

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

  • 我觉得这是正确的答案,因为它实际上是唯一可以在页脚高度未知的情况下工作的方法. (9认同)
  • 我要求OP接受这个作为答案.这是唯一的非hacky和通用解决方案.由于其他答案被高度评价,用户往往忽略了这个答案,后来后悔 - 第一手经验.:) (2认同)

Jimmy.. 30

您可以使用position: absolute以下内容将页脚放在页面底部,但请确保您的2列具有适当的值,margin-bottom以便它们永远不会被页脚遮挡.

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

  • 如果内容增长,它与内容重叠. (14认同)

Sophivorus.. 15

这是一个jQuery的解决方案,就像一个魅力.它检查窗口的高度是否大于身体的高度.如果是,那么它会更改页脚的页边距以进行补偿.在Firefox,Chrome,Safari和Opera中测试过.

$( function () {

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

});

如果您的页脚已经有一个margin-top(例如50像素),您将需要更改最后一部分:

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


Raleigh Buck.. 11

设置为的CSS #footer:

position: absolute;
bottom: 0;

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

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

  • 当窗口太小时,页脚会出现在这个css的内容前面. (8认同)

归档时间:

查看次数:

154461 次

最近记录:

7 月,3 周 前