0

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

我试过这个和另一个使用相同的方法添加填充底部....但是如果 .content 设置为绝对位置和顶部则不起作用

ps 我不想设置页脚固定...

谢谢。

.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>
4

1 回答 1

1

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

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

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

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

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

进行了这些更改后，您链接到的答案中描述的方法应该可以工作。

于 2013-06-09T03:40:27.307 回答