页脚在屏幕底部，上下文应该在其下面滚动。
页脚在屏幕底部，上下文应该在其下面滚动。
提问于 2014-09-27 04:32:26
我已经尝试了一段时间，但我似乎找不到适合我的问题的答案。
我想要一个页脚(-image)在底部的屏幕，它应该停留在屏幕底部时，滚动。这意味着页脚应该我以上的内容。
我已经尝试过几次了，但是每次我使用它时，页脚在开始时位于屏幕底部，但是当我开始滚动时，它相对于页面顶部保持相同的距离(意思是它在屏幕上向上滚动)。
有什么解决办法吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-09-27 04:35:21
是的，使用postion:fixed;很容易
<footer>I Stay Fixed!</footer> footer{
position:fixed;/*Fixes the footer so it cannot scroll*/
bottom:0;/*Fixes the footer to the bottom of the content window*/
z-index:999;/*Places the footer above all other elements with smaller z-index*/
}
有关示例，请参见下面的编码：
footer{
position:fixed;
bottom:0;
width:100%;
height:40px;
background:red;
}
.content{
height:1000px;
background:green;
}<div class="content">Content</div>
<footer>I Stay Fixed!</footer>
Stack Overflow用户
发布于 2014-09-27 04:39:28
postion:fixed和z-index: 10 (示例值-以确保页脚不会被其他对象覆盖)
Stack Overflow用户
发布于 2014-09-27 04:44:38
我想您的HTML是这样的：
<footer>
<img src="footer_image.jpg" />
</footer>下面是CSS：
footer
{
position: fixed;
bottom: 0;
z-index: 100;
}位置:固定的允许我给页脚一个关于浏览器视图的位置。
底部: 0意味着页脚和浏览器视图底部之间的差距将为0。
z-index: 100确保页脚高于任何其他内容，并使用较小的z-index。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26074702
复制相关文章
相似问题
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
