粘性页脚位于屏幕底部，而不是页面底部
[英]Sticky footer is at bottom of screen, instead of bottom of pafe
问题描述
So every time I make a website, I have issues with the footer. 
因此，每次创建网站时，页脚都会出现问题。 Now, after some googling, I found the following: 现在，经过一番搜索，我发现了以下内容：
http://getbootstrap.com/examples/sticky-footer/ http://getbootstrap.com/examples/sticky-footer/
I tried to apply it, but it didn't really work out... Instead of the footer staying in the bottom of the page, it just sticks at the bottom of my screen. 我尝试应用它，但是并没有真正解决问题……页脚并没有停留在页面底部，而是一直停留在屏幕底部。
This is where the footer sticks: 这是页脚粘贴的地方：
That is, when I fully scroll to the top of the page, the bottom of google chrome's display on my mac. 也就是说，当我完全滚动到页面顶部时，mac上google chrome的显示底部。
This is the HTML I use: 这是我使用的HTML：
<body>
<div id="wrapper">
<!-- A lot of content -->
</div>
<footer>
</footer>
</body>
And the CSS: 和CSS：
html {
box-sizing: border-box;
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow-x: hidden;
background: url(../img/bg.png);
}
#wrapper {
min-height: 100%;
height: auto;
margin: 0 auto -60px;
padding: 0,0,60px;
}
footer {
background-color: #292929;
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
}
So how is it that this footer confuses the bottom of my screen with the bottom of my page? 那么，该页脚如何将屏幕底部与页面底部混淆？
Thanks. 谢谢。
2 个解决方案
解决方案1
0 2015-05-07 06:15:00
The problem here is your body and html has a height of 100% When you assign a 100% height to the body and html elements, they won't expand beyond the height of your window regardless of their content. 这里的问题是您的body和html的高度为100%当您为body和html元素分配100％的高度时，无论其内容如何，它们都不会扩展到窗口的高度之外。
You should remove those properties and instead add min-height: 100% to html 您应该删除这些属性，而应将min-height: 100%到html
You should inspect the sample page you just linked to see the properties of html and body . 您应该检查刚刚链接的示例页面，以查看html和body的属性。
解决方案2
0 已采纳 2015-05-07 06:21:07
Why don't you change the footer's position to relative then it will appear at the bottom of the wrapper div. 为什么不将页脚的position更改为relative position ，那么它将显示在包装div的底部。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.