使页脚正确地粘在页底

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

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

2010-08-09 20:20:02

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

2013-05-29 20:21:46

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

用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

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

min-height:620px;
height:auto;

而页脚为:

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

2014-01-06 17:27:41

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

用这个。它会解决问题。

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

2014-03-17 14:23:05

我想分享我是如何解决我的使用Javascript函数，在页面加载被调用。当页面内容的高度小于屏幕的高度时，此解决方案将页脚定位在屏幕的底部。

希望这能有所帮助。

2014-06-27 08:05:24

我使用的一个简单的解决方案，从IE8+工作

在html上给min-height:100%，这样如果内容较少，那么页面仍然采用完整的视图高度，页脚贴在页面底部。当内容增加时，页脚随着内容向下移动，并保持贴在底部。

JS小提琴工作演示:http://jsfiddle.net/3L3h64qo/2/

Css

html{
  position:relative; 
  min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
  margin:0;
  padding:0;
}
.pageContentWrapper{
  margin-bottom:100px;/* Height of footer*/
} 
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:100px;
    background:#ccc;
}

Html

   <html>
    <body>
        <div class="pageContentWrapper">
            <!-- All the page content goes here-->
        </div>
        <div class="footer">
        </div>
    </body>
    </html>

2014-09-19 06:21:52

使页脚正确地粘在页底

推荐文章

最新文章

标签