当页脚位于其他 div 块内时出现粘滞页脚问题
Posted
技术标签:
【中文标题】当页脚位于其他 div 块内时出现粘滞页脚问题【英文标题】：sticky footer problems when footer is inside other div block 【发布时间】：2016-07-18 06:11:35 【问题描述】：我在将页脚粘贴到视口底部时遇到问题。 我尝试不同的方法， 在这里阅读页脚主题，阅读stickyfooter网站，尝试并没有运气，谷歌太多，所以我从我的网站上剪切的问题代码可以在那里测试： https://jsfiddle.net/26hf8sh2/
结构是
<html>
<body>
<root>
<header> ... </header>
<main> ... </main>
<footer> ... </footer>
</root>
</body>
</html>
如果没有太多内容，我希望扩展主块以适合页脚，如果再次内容低，我希望将页脚粘贴到视口底部，当我尝试绝对定位时，当我更改浏览器大小时，页脚与内容重叠。 另外，如果我尝试最小高度之类的东西，那么有很多内容页脚的地方似乎会在视口底部重叠内容和位置，而不是在页面高度的底部。 所以现在我只添加最小高度 800px 和相对定位。 因此，如果屏幕的分辨率大约为 1200px 的高度，那么它看起来很正常，但是当我在手机上打开它，或者将模式更改为全屏时，我看到底部有间隙。我尝试对我的网站进行编码，因此您可以在页面 protasov.by/contacts 中看到问题
我做错了什么？
提前致谢！
【问题讨论】：
在这里查看我的答案Sticky footer 我已经更改了我的网站代码，现在似乎可以工作了，除了 100% 似乎太多了，页脚在页面下方下降了一半，似乎标题 100px 高度，所以我应该以某种方式更改一些margin-top 让它稍微高一点？问题似乎只在内容低的地方，如果页面有很多内容，那么页脚位置就可以了。因此，如果我在页脚向上，那么在大页面上它可以重叠内容...... 好像页面中有很多内容页脚与它重叠，请查看protasov.by/service页面。 更改css。对于 html 标签，应该有 min-height:100%。它会修复它。 好的，现在似乎可以在 IE 和 Safari 中使用，但页脚位于页面下方。有没有可能让它随着相对位置上升？根 div 更改页脚宽度和边距，因此更改为绝对定位会导致手动添加属性以及长页面的一些问题。为 html 元素添加边距使页脚向下移动 【参考方案1】：解决方案是简单地在主块中使用 calc 函数来计算最小高度。 我只是添加：
min-height: -webkit-calc(100% - 320px);
min-height: -o-calc(100% - 320px);
min-height: -moz-calc(50% - 320px); /* Firefox 4+ */
min-height: calc(100% - 320px);
100 px 是页眉大小，220 是页脚大小。 所以在短页面中，页脚位于视口的底部
【讨论】：
有人知道为什么这在 chrome 和 safari 中有效而在 IE11 中无效？看起来像 IE 中的最小高度问题 通过将 % 更改为 vh 并将 min-height 和 height 添加到 html,body * 和 !important 标记，很好地修复了 IE。【参考方案2】：好的。让我们试试这样的：
html
min-height:100%
body
min-height:100%
.root
position:relative;
footer
position:absolute; bottom:0;
.wb_main
margin-bottom:220px;
【讨论】：
position: bottom 是什么？
应该是底部：0.. 太快了
好吧，我用这段代码在主块中使用填充而不是边距来保存主块的背景，但在短页面上，页脚被粘住了，但主块和页脚、高度和最小高度之间存在间隙没有做任何事情，所以猜测应该是解决方法，如果页面短且内容为空，则将主块拉伸到页脚:) 可能吗？
网站页脚仍然是相对的。如果你把它设置为绝对就可以了。只需从页脚中删除背景，因为您已经从 wb_main 中获得了它。
我的意思是明显的空白，因为主块使用背景颜色，而这个空白只是显示背景图像的空白。以上是关于当页脚位于其他 div 块内时出现粘滞页脚问题的主要内容，如果未能解决你的问题，请参考以下文章