使页脚正确地粘在页底

我试图有我的页脚(只是一个div与一行文本在它)是在屏幕的底部，如果内容不一直到底部，或在内容的底部，如果内容需要滚动条。如果内容不需要滚动条，它可以完美地工作，但是当内容太长时，页脚仍然在相同的位置，位于内容的正上方。

我的基本div结构是:

<div id="container">
    <div id="body"></div>
    <div id="footer"></div>
</div>

我相应的CSS(剥离了一些):

body {
    margin: 0;
    padding: 0;
    height: 100%;
}

html {
    margin: 0;
    padding: 0;
    height: 100%;
}

#container {
    width: 674px;
    min-height: 100%;
    height: 100%;
    position: relative;
    margin: 0 auto;
}

#body {
    width: 616px;
    padding: 5px 14px 5px 14px;
    margin: 0 auto;
    padding-bottom: 20px;
}

#footer {
    position: absolute;
    bottom: 0;
    width: 644px;
    height: 20px;
    margin: 0 auto;
}

当前回答

最简单的解决方案是在<html>标签上使用min-height，并使用position:absolute定位<footer>;

演示:jsfiddle和SO代码片段:

html { position: relative; min-height: 100%; } body { margin: 0 0 100px; /* bottom = footer height */ padding: 25px; } footer { background-color: orange; position: absolute; left: 0; bottom: 0; height: 100px; width: 100%; overflow: hidden; } <article>  <h1>James Dean CSS Sticky Footer</h1> <p>Blah blah blah blah</p> <p>More blah blah blah</p> </article> <footer> <h1>Footer Content</h1> </footer>

2013-08-05 19:56:21

其他回答

用这个。它会解决问题。

#ibox_footer {
    padding-top: 3px; 
    position: absolute;
    height: 20px;
    margin-bottom: 0;
    bottom: 0;
    width: 100%;
}

2014-03-17 14:23:05

使用min-height作为像素值，而不是%。如:

min-height:620px;
height:auto;

而页脚为:

.footer {
    height:70px;
    clear:both;
    position:relative;
    bottom:0;
    width: 100%;
}

2014-01-06 17:27:41

用jQuery把里面的代码<head></head>标签

<script type="text/javascript">
$(document).ready(function() { 
    var docHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var footerTop = $('#footer').position().top + footerHeight;  
    if (footerTop < docHeight) {
        $('#footer').css('margin-top', 10 + (docHeight - footerTop) + 'px');
    }
});
</script>

2013-09-20 22:42:38

这应该对你有帮助。

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

2013-10-27 15:54:56

这里分享的模型与Ryan Fait的StickyFooter非常相似 http://ryanfait.com/sticky-footer

到目前为止，在这个讨论中只少了一个div (Kenneth Palanganas提出的模型在本地Win81设计中正常工作了大约48小时，然后在ie/chrome中由于未知原因崩溃)。Ryan的“push”div将满足一些不情愿的浏览器。注意，px是常用的，但是，对于液体布局一致性，em可能是首选。

* { border: 0; margin: 0; padding: 0; }
html, body { height: 100%; }
.wrapper { height: auto !important; height: 100%; margin: 0 auto -1em; min-height: 100%; }
.footer, .push { height: 1em; }

<div class="wrapper"><p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer"><p>This is a footer</p>
</div>

2014-01-16 10:25:55

使页脚正确地粘在页底

推荐文章

最新文章

标签