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

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

当前回答

要获得一个粘性页脚:

为你的内容设置一个<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

其他回答

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

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

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

2017-11-25 18:34:59

对于这个问题，我看到的许多答案都是笨拙的，难以实现和低效的，所以我想我应该尝试一下，并提出我自己的解决方案，只是一点点css和html

超文本标记语言身体{ 高度:100%; 保证金:0; ｝ .body { Min-height: calc(100% - 2rem); 宽度:100%; 背景颜色:灰色; ｝ .footer { 高度:2快速眼动; 宽度:100%; 背景颜色:黄色; ｝身体< > <div class="body">test as body</div> <div class="footer">test as footer</div> 身体< / >

这是通过设置页脚的高度，然后使用CSS计算出页面的最小高度，页脚仍然在底部，希望这有助于一些人:)

2016-02-10 09:04:23

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

2012-02-18 23:36:29

一个老线程我知道，但如果你正在寻找一个响应式的解决方案，这个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/

2016-08-29 06:08:49

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

推荐文章

最新文章

标签