如果页面较短，则将HTML页脚保留在窗口底部
[英]Keeping HTML footer at the bottom of the window if page is short
问题描述
Some of my webpages are short. 
我的某些网页很短。 In those pages, the footer might end up in the middle of the window and below the footer is whitespace (in white). 在这些页面中，页脚可能最终会出现在窗口的中间，而页脚下方则是空白（以白色显示）。 That looks ugly. 看起来很丑。 I'd like the footer to be at the bottom of the window and the limited content body just gets stretched. 我希望页脚位于窗口的底部，而有限的内容主体会被拉伸。
However, if the webpage is long and you have to scroll to see the footer (or all of it), then things should behave as normal. 但是，如果网页很长，并且您必须滚动查看页脚（或其全部），那么事情应该会正常进行。
What's the proper way to do this with CSS? 用CSS执行此操作的正确方法是什么？ Do I need Javascript/jQuery to make this happen? 我需要Javascript / jQuery来实现吗？
I only care about IE9+ and modern versions of other browsers. 我只关心IE9 +和其他浏览器的现代版本。 The height of the footer can change from page to page too, so I'd like to not rely on the height. 页脚的高度也可以在页面之间变化，因此我不想依赖高度。
6 个解决方案
解决方案1
11 已采纳 2012-11-12 18:33:56
Check out this site . 看看这个网站 。 He has a good tutorial on how to do this with css. 他有一个很好的教程，介绍如何使用CSS执行此操作。
I copied his css just in case Matthew's site is taken down. 我复制了他的css，以防万一Matthew的网站被删除。
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
EDIT 编辑
Since the height of the footer is different from page to page, you could get the height of the footer and then adjust the #body padding-bottom with javascript. 由于页脚的高度因页面而异，因此您可以获取页脚的高度，然后使用javascript调整#body padding-bottom。 Here is an example using jquery. 这是使用jquery的示例。
$(function(){
$('#body').css('padding-bottom', $('#footer').height()+'px');
});
解决方案2
2 2012-11-12 18:37:49
It is a copy of the styles that Github uses to keep it's footer at the bottom of a page. 它是Github用来将页脚保留在页面底部的样式的副本。 It is a little hacky, and requires you to know the height of your footer (which may not work for your use case) 这有点棘手，需要您知道页脚的高度（这可能不适用于您的用例）
Markup 标记
<div class="wrapper">
<div class="content"><p>Page Content</p></div>
<div class="footer-push"></div>
</div>
<footer>
<p>footer-text</p>
<img src="http://placekitten.com/100/100" alt="footer image">
</footer>
CSS (well, scss) CSS（嗯，scss）
// our page element
html {
height:100%;
}
body {
height:100%;
}
.wrapper {
background:gray;
min-height:100%;
height: auto !important; // the magic!
height:100%;
margin-bottom:-158px; // the height of our footer + margin
}
.footer-push {
clear:both;
height:158px; // the height of our footer + margin
}
footer {
background:rgba(#a388a3,0.8);
margin-top:20px;
height:138px;
}
The important things here seem to be: 这里重要的事情似乎是：
- Setting height: 100% on containing elements (esp
htmlandbody)设置高度：100％包含元素（特别是html和body） - Knowing the height of your footer, and accounting for it with a "push" element 了解页脚的高度，并使用“ push”元素进行说明
- using the combination of
min-heightheight: auto !importantandheight:100%结合使用min-heightheight: auto !important和height:100%
Hope that helps! 希望有帮助！
解决方案3
0 2015-12-07 22:54:24
HTML 的HTML
<body>
<div class="example">
<p>Lorem ipsum dolor sit amet consectetur...</p>
</div>
<footer>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</footer>
</body>
CSS 的CSS
body {
min-height: 100%;
}
footer {
position: absolute;
bottom: 0;
}
解决方案4
0 2018-05-21 18:49:46
Considering that all your footer is inside the <footer> html tag, this is an easy solution using jQuery. 考虑到所有页脚都位于<footer> html标记内，因此使用jQuery可以轻松解决此问题。
JS: JS：
$(document).ready(function(){
$('body').css('padding-bottom', $('footer').height()+'px');
});
CSS: CSS：
footer {
position:absolute;
bottom:0;
}
解决方案5
-2 2012-11-12 18:06:20
No it's very easy set a minimum for your body height. 不，很容易为您设置身高的最小值。
like this: min-height:500px; 像这样：min-height：500px; then the min height is 500px. 那么最小高度是500px。
解决方案6
-3 2012-11-12 18:10:45
use min-height property, though not entirely reliable as some older versions may not support it. 使用min-height属性，尽管并不完全可靠，因为某些旧版本可能不支持它。 Throw in some javascript if you dont mind. 如果您不介意，请添加一些JavaScript。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.