Question

如果.content为absolute，如何设置页脚底部？

我尝试this并且另一个使用相同的方法添加填充底部....但是如果.content设置位置绝对和顶部

它不起作用

p.s我不想设置页脚固定...

感谢。

.head{
    position: absolute;
    left: 0;
    top: 40px;
    height: 160px;
}
.content{
    position: absolute;
    top: 200px;
}
.footer{
    position: absolute;
    bottom: 0;
}
<body>
    <div class="head"></div>
    <div class="content"></div>
    <div class="footer"></div>
</body>

Answer 1

假设您要使用您链接的答案中提供的解决方案，则必须停止使用position: absolute。您可以使用边距替换top：

.head {
    margin: 40px 0;
    height: 160px;
}

但是，尝试使用粘性页脚技巧会触发CSS的一个不幸属性：如果第一个子元素上有边距，则该边距将传播到父元素。这会导致粘性页脚技巧出现问题。

解决方案是在包装器上使用padding而不是在标头上使用margin-top。您的代码可能如下所示：

.wrap {
    padding-top: 40px;
}
.head {
    margin-bottom: 40px;
    height: 160px;
}

完成这些更改后，您链接的答案中描述的方法应该有效。

如果`.content`是'绝对'，如何设置页脚底部？

1 个答案: