Question

我想自定义Wordpress主题（Attitude）以添加粘性页脚。不幸的是，我遇到了两个问题：

如果内容不足以填满整个页面，则会显示内容与页脚之间的灰色差距：Demo
如果有足够的内容来填充页面，页脚会覆盖内容但我不会将页脚放在页面的末尾，内容之后（如果有足够的内容填充页面）：Demo

这是我目前的CSS自定义：

body {
   height:100%;
}
.wrapper {
   min-height:100%;
   position: relative;
}
#site-generator {
   position:fixed;
   bottom:0;
   width:100%;
   background-color: #fff;
   max-width: 1038px;
}

请您帮我解释一下我能解决上述问题的方法吗？非常感谢你。

Answer 1

对于上面的演示1示例，请将其添加到CSS样式表中：

html {
    height: 100%;
}

这将允许您的body标记及其他子代继承其主要祖先height标记的html。将内容扩展到页面底部。确保height:100%和html标记始终具有body，以使其有效。

对于上面的演示2示例，请添加：

html {
    height: 100%;
}

.wrapper {
    padding-bottom: 65px; /* same value as footer .site-generator height */ 
}

#site-generator {
    position: absolute; /* use absolute instead of fixed */
}

我使用position:absolute代替position:fixed的原因是因为fixed将始终位于浏览器视口中相同位置的顶部。

自定义wordpress主题以创建粘性页脚

1 个答案: