我有一个简单的2列布局,带有一个脚注,可以清除标记中的左右div。我的问题是,我不能让页脚留在所有浏览器的页面底部。如果内容向下推页脚,它就会起作用,但情况并不总是如此。
当前回答
一个解决方案是为盒子设置最小高度。不幸的是,IE似乎并没有很好地支持它(意外)。
其他回答
大多数答案使用固定值的css。虽然它可能工作,但当页脚更改时,需要调整页脚大小的固定值。另外,我使用的是WordPress,不想打乱WordPress主题为你定义的页脚大小。
我用一点javascript解决了这个问题,只在需要时触发。
var fixedFooter = false;
document.addEventListener("DOMContentLoaded", function() {fixFooterToBottom();}, false);
window.addEventListener("resize", function() {fixFooterToBottom();}, false);
function fixFooterToBottom()
{
var docClientHeight = document.documentElement.clientHeight;
var body = document.querySelector("body");
var footer = document.querySelector("footer");
fixedFooter = fixedFooter ? (body.clientHeight + footer.clientHeight ) < docClientHeight : body.clientHeight < docClientHeight;
footer.style.position = fixedFooter ? "fixed" : "unset";
footer.style.left = fixedFooter ? 0 : "unset";
footer.style.right = fixedFooter ? 0 : "unset";
footer.style.bottom = fixedFooter ? 0 : "unset";
}
使用绝对定位和z-index创建一个粘脚div在任何分辨率,使用以下步骤:
创建一个脚注div, position: absolute;底部:0;以及期望的高度 设置页脚的填充,以便在内容底部和窗口底部之间添加空白 创建一个容器div,用position: relative包装主体内容;最小高度:100%; 为主内容div添加底部填充,它等于高度加上页脚的填充 如果页脚被剪切,则设置页脚的z-index大于容器div
这里有一个例子:
<!doctype html> <html> <head> <title>Sticky Footer</title> <meta charset="utf-8"> <style> .wrapper { position: relative; min-height: 100%; } .footer { position: absolute; bottom:0; width: 100%; height: 200px; padding-top: 100px; background-color: gray; } .column { height: 2000px; padding-bottom: 300px; background-color: grxqeen; } /* Set the `html`, `body`, and container `div` to `height: 100%` for IE6 */ </style> </head> <body> <div class="wrapper"> <div class="column"> <span>hello</span> </div> <div class="footer"> <p>This is a test. This is only a test...</p> </div> </div> </body> </html>
在我的网站上,我总是使用:
position: fixed;
...在我的CSS页脚。将它固定在页面底部。
一个老线程我知道,但如果你正在寻找一个响应式的解决方案,这个jQuery添加将有助于:
$(window).on('resize',sticky);
$(document).bind("ready", function() {
sticky();
});
function sticky() {
var fh = $("footer").outerHeight();
$("#push").css({'height': fh});
$("#wrapper").css({'margin-bottom': -fh});
}
完整的指南可以在这里找到:https://pixeldesigns.co.uk/blog/responsive-jquery-sticky-footer/
对于这个问题,我看到的许多答案都是笨拙的,难以实现和低效的,所以我想我应该尝试一下,并提出我自己的解决方案,只是一点点css和html
超文本标记语言 身体{ 高度:100%; 保证金:0; } .body { Min-height: calc(100% - 2rem); 宽度:100%; 背景颜色:灰色; } .footer { 高度:2快速眼动; 宽度:100%; 背景颜色:黄色; } 身体< > <div class="body">test as body</div> <div class="footer">test as footer</div> 身体< / >
这是通过设置页脚的高度,然后使用CSS计算出页面的最小高度,页脚仍然在底部,希望这有助于一些人:)
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?