当页脚位于其他 div 块内时出现粘滞页脚问题答案

【问题标题】：sticky footer problems when footer is inside other div block当页脚位于其他 div 块内时出现粘滞页脚问题
【发布时间】：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 元素添加边距使页脚向下移动

标签： html css footer

【解决方案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 中获得了它。
我的意思是明显的空白，因为主块使用背景颜色，而这个空白只是显示背景图像的空白。