使页脚正确地粘在页底

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

当前回答

用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

其他回答

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

min-height:620px;
height:auto;

而页脚为:

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

2014-01-06 17:27:41

最简单的方法是为你的页面容器设置最小高度为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

用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

使页脚正确地粘在页底

推荐文章

最新文章

标签