粘性页脚浮动到一页顶部

Posted

技术标签:

【中文标题】粘性页脚浮动到一页顶部【英文标题】:Sticky footer floating to top of one page 【发布时间】:2015-09-19 09:17:56 【问题描述】:

我很难弄清楚为什么我的粘性页脚在我网站的主页上正常工作,但在另一个页面上却不行。页脚 div 中的段落停留在页面底部,但背景 div 浮动到导航栏后面的页面顶部。 这是页脚损坏的页面的小提琴:https://jsfiddle.net/justaflurg/hxhbnmcs/ 以及带有工作页脚的主页:https://jsfiddle.net/justaflurg/p4efkvkq/

我正在使用这个 CSS 创建页脚–

.pagewrap 
min-height: 100%;
margin-bottom: -65px; 
display: block;


.pagewrap:after 
content: "";
display: block;


.footer, .pagewrap:after 
height: 65px; 
margin-bottom: -65px;


.footer 
display: block;
background: #E0E0E0;
color: #999;
border-top: solid 1px #DDD;

【问题讨论】:

【参考方案1】:

试试这个

.footer, .pagewrap:after 
height: 65px; 
margin-bottom: -65px;
float: left;

【讨论】:

以上是关于粘性页脚浮动到一页顶部的主要内容,如果未能解决你的问题,请参考以下文章

如何制作一个只在android屏幕上浮动的粘性列表项?

如何创建一个与 Bootstrap 3 配合得很好的粘性页脚

菜单和内容 div 向左浮动并带有粘性页脚 -> 高度 100%

页脚不浮动在底部

第八周总结Access

如何在此布局中使内容 100% 高度和等高列?