Question

我有将页脚粘贴到视口底部的问题。我尝试不同的方法，在这里阅读页脚主题，阅读stickyfooter网站，尝试，没有运气，谷歌太多，所以我剪切形成我的网站的问题代码可以在那里测试： https://jsfiddle.net/26hf8sh2/

结构是

{{1}}

如果内容不多，我希望扩展主块以适应页脚，并且如果内容较低则将页脚粘贴到视口底部，当我尝试绝对定位页脚重叠浏览器大小时重叠内容。此外，如果我尝试像最小高度左右，那么有很多内容的页脚似乎在视口底部重叠内容和位置，但不在页面高度的底部。所以现在我只需添加最小高度800px和相对定位。因此，如果屏幕的分辨率高度约为1200px，那么它看起来很正常，但是当我在移动设备上打开它，或者将模式更改为全屏时，我会在底部看到间隙。我尝试编写我的网站代码，以便您可以在例如页面protasov.by/contacts

中查看问题

我做错了什么？

提前致谢！

Answer 1

确定。让我们尝试这样的事情：

html{
    min-height:100%
}
body{
    min-height:100%
}
.root{
    position:relative;
}
footer{
    position:absolute; bottom:0;
}
.wb_main{
    margin-bottom:220px;
}

Answer 2

解决方案是在主程序段中使用最小高度的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是页脚大小。所以在短页面中页脚到达视口的底部

页脚在其他div块内时粘性页脚问题

2 个答案: