页脚不粘在底部 [英] Footer not sticking to the bottom
问题描述
我想要一个页脚，它将保留在botoom，即使身体中的内容无法填充浏览器视口。当内容的高度足以填充视口时，我不希望它与主体内容重叠。在线搜索我主要找到一个粘性页脚，它与内容重叠，即使内容足以填满视口。到目前为止，这是我正在尝试（我也使用bootstrap3）
I want a footer that will remain at the botoom even if the content in the body is not able to fill the browser viewport. I do not want it to overlap over the main body content when the height of the content is enough to fill the viewport. On searching online I mostly find a "sticky" footer which overlaps with the content even the content is enough to fill up the viewport. So far, this is what I am trying (I am also using bootstrap3)
HTML（在< body> tag）：
HTML (within the <body> tag):
<footer style="background-color: #b77b48;color:white;padding:10px">
<div class="container">
<div class="row">
<div class="col-lg-4">
<h4 class="text-center"> About</h4>
<p class="text-justify">This website is blah bah</p>
</div>
<div class="col-lg-4">
<h4 class="text-center">Links</h4>
<p class="text-center">
<a href=# style="color:white">Rules & FAQ</a><br />
<a href=# style="color:white">Privacy Policy</a><br />
<a href=# style="color:white">Contact Us</a><br />
<a href=# style="color:white">Other Projects</a><br />
</p>
</div>
<div class="col-lg-4">
<h4 class="text-center">Find us at</h4>
<p style="text-align: center;"><i class="fa fa-github fa-3x" ></i>
<i class="fa fa-twitter fa-3x"></i>
<i class="fa fa-youtube fa-3x"></i>
</p>
</div>
</div>
</div>
<footer>
CSS：
body,html{
min-height:100%;
}
.container{
/*min-height:20%;*/
}
footer{
height:180px;
bottom:0;
}
推荐答案
您可以阅读这篇文章：
http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/
您还可以查看此操作：
http://jsfiddle.net/giovapanasiti/atCUX/
$(function() {
// Store references to all rows for future use
var rows = $(".Row"),
content = rows.filter(".Expand");
// Test first to see if `display: table;` is being used
if (rows.css("display") === "block") {
function reflow() {
var height = rows.parent().height();
// Subtract height of fixed rows
rows.not(content).each(function() {
height -= $(this).height();
});
content.height(height);
}
// Run immediately on DOM ready…
reflow();
// And again on page load and resize events
$(window).bind("load resize", reflow);
}
});
（这不是我所有的，我在多年前分手，不记得我在哪里）
(it is not all made by me. I forked it years ago and cannot remember where i took it)
这篇关于页脚不粘在底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
