我使用下面的CSS强制页脚到页面底部
#bump {
margin-top: 50px;
height:150px;
}
#footer {
padding-top: 5px;
min-height: 150px;
background-color: #284602;
color: #ecf0f1;
position:absolute;
bottom:0;
width: 100%;
}
这适用于中型或大型屏幕设备,在较小的设备上,但是页脚可以最终覆盖内容(响应式页脚在小型设备上生长并有效地翻倍)。所以我想我可以在style.css的末尾使用媒体查询:
// Small devices (landscape phones, less than 768px)
@media only screen and (max-width: 768px) {
#bump {
margin-top: 50px;
height:300px;
}
#footer {
padding-top: 5px;
min-height: 300px;
background-color: #284602;
color: #ecf0f1;
position:absolute;
bottom:0;
width: 100%;
}
}
它不起作用 - 我误解了什么吗?媒体查询位于我的文档末尾,查看开发人员工具,它仍然认为在一个小屏幕上高度为150PX。
想法?感谢