html - 如何在保留布局的同时向此 HTML 模板添加粘性页脚?

标签 html css sticky-footer css3pie

是否可以向 this HTML template 添加粘性页脚在 IE 兼容模式下工作并且跨浏览器兼容?

我尝试添加 Ryan Fait sticky footer ,但是当我添加它时,一切似乎都崩溃了。

不能使用在父容器上使用 100% 高度的粘性页脚,然后为页脚使用负的上边距并将其拉回到视口(viewport)中,因为这将消除在两者之间看到背景颜色的能力页脚和主要内容。不能在其中注入(inject)背景颜色的间距 div 就足够了,因为模板使用圆 Angular ,这似乎很难做到。

我也试过这个'top border soak up sticky footer ' 类似于 Ryan Fait 方法,但我也无法让它发挥作用。

最佳答案

已解决。基本上,正如您所说,我应用了 Ryan Fait 粘性页脚并执行了以下操作:
- 将页脚移到包装外,将页眉移到包装内。
- 从 body 上移除了填充物。
- 从页脚中删除了顶部边距、底部边框、框阴影(和底部圆 Angular )。
- 将 wrapper 边距向上拉一个额外的像素 (.063em) 以说明页脚的顶部边框。
-添加填充底部:10px;到 #innerwrap 以获得我正在寻找的 div 间距(就像它在 Ryan Fait 页面上所说的那样)。
- 使页脚的宽度和边距与包装相匹配。

关于html - 如何在保留布局的同时向此 HTML 模板添加粘性页脚?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12206845/

相关文章:

html - 如何使用 bootstrap 3 在面板中垂直对齐文本

html - 使用圆 Angular 时子 div 不填充父 div

javascript - 粘性页脚不粘在较大设备的屏幕底部 - Bootstrap

html - 试图将 child 推出 parent ,但 parent 获得滚动条

javascript - 显示/隐藏功能 - 额外的空白

html - 如何隐藏我的源代码以免被复制

css - 粘性页脚 Bootstrap 4

html - CSS 粘滞栏重叠

全屏 HTML5 中的 javascript 打开(页面元素)在 Internet Explorer 中失败

html - Bootstrap 4 测试版 : Options Menu has double dropdown icons