使页脚正确地粘在页底

我试图有我的页脚(只是一个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;
}

当前回答

这里分享的模型与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

其他回答

最简单的方法是为你的页面容器设置最小高度为400px，假设你的页脚在最后。你甚至不需要为页脚放置CSS或者只是一个宽度:100%假设你的页脚是<body>的直接子

2013-05-29 20:21:46

用这个。它会解决问题。

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

2014-03-17 14:23:05

这应该对你有帮助。

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

为什么不使用:{位置:固定;底部:0}?

2010-08-09 20:20:02

最简单的解决方案是在<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

使页脚正确地粘在页底

推荐文章

最新文章

标签