Html 粘性页脚隐藏内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13881548/
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
Sticky footer hiding content
提问by soft genic
I made the following sticky footer using CSS. The bottom page content is currently hidden behind the footer (see the attached screenshot). How can I adjust my CSS so that all of the body content is visible and the footer remains stuck to the bottom of the browser window? Thank you!
我使用 CSS 制作了以下粘性页脚。底部页面内容目前隐藏在页脚后面（请参阅附加的屏幕截图）。如何调整我的 CSS 以使所有正文内容都可见，而页脚仍然卡在浏览器窗口的底部？谢谢！
CSS:
CSS：
.fo {
position: absolute;
left: 0;
bottom: 0;
height:65px;
width: 100%;
color: #eaeaea;
margin-left: -8px;
}
采纳答案by kthornbloom
I came across this answer out on the internet in the past. Works great:
我过去在互联网上遇到过这个答案。效果很好：
HTML
HTML
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
CSS
CSS
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;
}
/* IE 6 and down:
#container {
height:100%;
}
回答by Greg
You can create a clear div and give it a height.
您可以创建一个清晰的 div 并为其指定高度。
.clear { clear: both; height: 60px; }
<div class="clear"></div>
<div id="footer">FOOTER CONTENT</div>
Height being whatever you need to keep content above the footer, eg. taller than the footer. If the footer is 50px; tall, I do 60px; for the height in the clear div. So when I scroll, the footer stays in place but as I get to the bottom the content that is flowing from behind the footer has room to get pushed above the footer without being covered. Super simple, and it worked perfectly.
高度是将内容保持在页脚上方所需的任何值，例如。比页脚高。如果页脚是 50px；高，我做60px；对于清晰 div 中的高度。因此，当我滚动时，页脚保持在原位，但是当我到达底部时，从页脚后面流出的内容有空间被推到页脚上方而不会被覆盖。超级简单，而且效果很好。
回答by Sarah
I was having trouble with this as well when I came up with my own solution. I set my footer to have a heightof 10%:
当我想出自己的解决方案时，我也遇到了这个问题。我把我的页脚拥有height的10%：
footer{
position: fixed;
**height:10%;**
width:100%;
padding-top: 2px;
bottom: 0;
clear: both;
background-color: black;
color: white;
float: left;
overflow: auto;
}
and my content to have a bottom marginof 11%:
我的内容有一个bottom margin的11%：
#content{
width: 800px;
margin: auto;
background-color: rgba(0,0,0,.7);
color: #99FFCC;
height: 80%;
padding:30px;
**margin-bottom: 11%;**
}
I hope this helps anyone who had the same problem!
我希望这可以帮助任何遇到同样问题的人！
回答by Russell McDonnell
I was having the same issue and the other solutions pointed me in the right direction, but because I am using Angular Material all I had to do was add layout="column" and it worked great
我遇到了同样的问题，其他解决方案为我指明了正确的方向，但是因为我使用的是 Angular Material，所以我所要做的就是添加 layout="column" 并且效果很好
<div id="container" layout="column">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
回答by Luca Di Bello
I just add an empty div right ahead the footer and I named it with an id (div-spacer):
我只是在页脚前面添加一个空的 div 并用一个 id (div-spacer) 命名它：
<div id="div-spacer"></div>
<div id="div-spacer"></div>
Then I've created a simple line of code that grabs the last element's height and set it to the div:
然后我创建了一行简单的代码来获取最后一个元素的高度并将其设置为 div：
$(document).ready(function () {
$('#div-spacer').css("height",$('.card-transaction:last').css("height"));
});
With this solution the last element is always visible!
使用此解决方案，最后一个元素始终可见！
回答by Vik
I just added the br tag 5 times at the end of the body text to create some extra white spaces. It helped me.
我只是在正文末尾添加了 5 次 br 标签以创建一些额外的空白。它帮助了我。
sometimes keeping it simple works!!!
有时保持简单有效！！！
