Html 使页脚正确粘贴到页面底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3443606/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make footer stick to bottom of page correctly
提问by James Simpson
I am trying to have my footer (just a div with a line of text in it) be at the bottom of the screen if the content doesn't go all the way to the bottom, or be at the bottom of the content if the content requires scroll bars. If the content doesn't require scroll bars, it works perfectly, but when the content is too long, the footer is still in the same spot, sitting right on top of the content.
我试图让我的页脚（只是一个带有一行文本的 div）在屏幕底部，如果内容没有一直到底部，或者在内容的底部，如果内容需要滚动条。如果内容不需要滚动条，它可以完美运行，但是当内容太长时，页脚仍然在同一位置，正好位于内容的顶部。
My basic div structure is:
我的基本 div 结构是：
<div id="container">
<div id="body"></div>
<div id="footer"></div>
</div>
My corresponding CSS (stripped down somewhat):
我对应的 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;
}
回答by Vinicius José Latorre
The simplest solution is to use min-heighton the <html>tag and position the <footer>with position:absolute;
最简单的解决方案是min-height在<html>标签上使用并定位<footer>withposition:absolute;
Demo: jsfiddleand SO snippet:
演示：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>
<!-- or <div class="container">, etc. -->
<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>回答by Nicolas Viennot
Why not using: { position: fixed; bottom: 0 }?
为什么不使用：{ position: fixed; bottom: 0 }？
回答by Sanjeev
A simple solution that i use, works from IE8+
我使用的一个简单的解决方案，适用于 IE8+
Give min-height:100% on html so that if content is less then still page takes full view-port height and footer sticks at bottom of page. When content increases the footer shifts down with content and keep sticking to bottom.
在 html 上提供 min-height:100% 以便如果内容较少，则静止页面将采用完整的视口高度，而页脚则位于页面底部。当内容增加时，页脚随着内容向下移动并保持在底部。
JS fiddle working Demo: http://jsfiddle.net/3L3h64qo/2/
JS小提琴工作演示：http: //jsfiddle.net/3L3h64qo/2/
Css
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
<html>
<body>
<div class="pageContentWrapper">
<!-- All the page content goes here-->
</div>
<div class="footer">
</div>
</body>
</html>
回答by user2645333
Use this one. It will fix it.
用这个。它会修复它。
#ibox_footer {
padding-top: 3px;
position: absolute;
height: 20px;
margin-bottom: 0;
bottom: 0;
width: 100%;
}
回答by Vishal
do it using jQuery put inside code on the <head></head>tag
使用 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>
回答by Kenneth Palaganas
This should help you.
这应该对你有帮助。
* {
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;
}
回答by bishal
Use min-height as some pixel value, instead of %.
Like:
使用 min-height 作为某个像素值，而不是%.
喜欢：
min-height:620px;
height:auto;
and footer as:
和页脚为：
.footer {
height:70px;
clear:both;
position:relative;
bottom:0;
width: 100%;
}
回答by user2003524
The model being shared here is very similar to Ryan Fait's StickyFooter http://ryanfait.com/sticky-footer
这里分享的模型与 Ryan Fait 的 StickyFooter 非常相似 http://ryanfait.com/sticky-footer
Just one div is missing so far in this discussion (the model proposed here by Kenneth Palanganas worked fine for local Win81 design for about 48 hours and then in ie/chrome collapsed for unknown reason). Ryan's "push" div will satisfy some reluctant browsers. Note that px is usual, however, for liquid layout consistency, em may be preferred.
到目前为止，在本次讨论中只缺少一个 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>
回答by ITWitch
I would like to share how I solved mine using Javascript function that is called on page load. This solution positions the footer at the bottom of the screen when the height of the page content is less than the height of the screen.
我想分享我如何使用在页面加载时调用的 Javascript 函数来解决我的问题。当页面内容的高度小于屏幕高度时，此解决方案将页脚定位在屏幕底部。
function fix_layout(){
//increase content div length by uncommenting below line
//expandContent();
var wraph = document.getElementById('wrapper').offsetHeight;
if(wraph<window.innerHeight){ //if content is less than screenheight
var headh = document.getElementById('header').offsetHeight;
var conth = document.getElementById('content').offsetHeight;
var footh = document.getElementById('footer').offsetHeight;
//var foottop = window.innerHeight - (headh + conth + footh);
var foottop = window.innerHeight - (footh);
$("#footer").css({top:foottop+'px'});
}
}
function expandContent(){
$('#content').append('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing. Sed quam odio, tempus ac, aliquam molestie, varius ac, tellus. Vestibulum ut nulla aliquam risus rutrum interdum. Pellentesque lorem. Curabitur sit amet erat quis risus feugiat viverra. Pellentesque augue justo, sagittis et, lacinia at, venenatis non, arcu. Nunc nec libero. In cursus dictum risus. Etiam tristique nisl a nulla. Ut a orci. Curabitur dolor nunc, egestas at, accumsan at, malesuada nec, magna.</p>'+
'<p>Nulla facilisi. Nunc volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut sit amet orci vel mauris blandit vehicula. Nullam quis enim. Integer dignissim viverra velit. Curabitur in odio. In hac habitasse platea dictumst. Ut consequat, tellus eu volutpat varius, justo orci elementum dolor, sed imperdiet nulla tellus ut diam. Vestibulum ipsum ante, malesuada quis, tempus ac, placerat sit amet, elit.</p>'+
'<p>Sed eget turpis a pede tempor malesuada. Vivamus quis mi at leo pulvinar hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque aliquet lacus vitae pede. Nullam mollis dolor ac nisi. Phasellus sit amet urna. Praesent pellentesque sapien sed lacus. Donec lacinia odio in odio. In sit amet elit. Maecenas gravida interdum urna. Integer pretium, arcu vitae imperdiet facilisis, elit tellus tempor nisi, vel feugiat ante velit sit amet mauris. Vivamus arcu. Integer pharetra magna ac lacus. Aliquam vitae sapien in nibh vehicula auctor. Suspendisse leo mauris, pulvinar sed, tempor et, consequat ac, lacus. Proin velit. Nulla semper lobortis mauris. Duis urna erat, ornare et, imperdiet eu, suscipit sit amet, massa. Nulla nulla nisi, pellentesque at, egestas quis, fringilla eu, diam.</p>'+
'<p>Donec semper, sem nec tristique tempus, justo neque commodo nisl, ut gravida sem tellus suscipit nunc. Aliquam erat volutpat. Ut tincidunt pretium elit. Aliquam pulvinar. Nulla cursus. Suspendisse potenti. Etiam condimentum hendrerit felis. Duis iaculis aliquam enim. Donec dignissim augue vitae orci. Curabitur luctus felis a metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In varius neque at enim. Suspendisse massa nulla, viverra in, bibendum vitae, tempor quis, lorem.</p>'+
'<p>Donec dapibus orci sit amet elit. Maecenas rutrum ultrices lectus. Aliquam suscipit, lacus a iaculis adipiscing, eros orci pellentesque nisl, non pharetra dolor urna nec dolor. Integer cursus dolor vel magna. Integer ultrices feugiat sem. Proin nec nibh. Duis eu dui quis nunc sagittis lobortis. Fusce pharetra, enim ut sodales luctus, lectus arcu rhoncus purus, in fringilla augue elit vel lacus. In hac habitasse platea dictumst. Aliquam erat volutpat. Fusce iaculis elit id tellus. Ut accumsan malesuada turpis. Suspendisse potenti. Vestibulum lacus augue, lobortis mattis, laoreet in, varius at, nisi. Nunc gravida. Phasellus faucibus. In hac habitasse platea dictumst. Integer tempor lacus eget lectus. Praesent fringilla augue fringilla dui.</p>');
}/*sample CSS*/
body{ background: black; margin: 0; }
#header{ background: grey; }
#content{background: yellow; }
#footer{ background: red; position: absolute; }
#header, #content, #footer{ display: inline-block; width: 100vw; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onload="fix_layout()">
<div id="wrapper">
<div id="header" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
[some header elements here]
</div>
<div id="content" class="container">
[some content elements here]
</div>
<div id="footer" class="footer">
[some footer elements here]
</div>
</div>
</body>Hope that helps.
希望有帮助。
回答by Nicolas Manzini
the easiest hack is to set a min-heightto your page container at 400px assuming your footer come at the end. you dont even have to put css for the footer or just a width:100%assuming your footer is direct child of your <body>
min-height假设您的页脚在最后，最简单的方法是将400px设置到您的页面容器。你甚至不必为页脚放置 css 或者只是width:100%假设你的页脚是你的直接子元素<body>
