Question

我需要帮助保持我的页脚粘在底部，但也不要重叠上部元素。我还是相当新/生锈，因为我在大学毕业后花了两年的时间才找到一份网络工作，所以我没有达到应有的水平。

反正，这是我的html格式。我想要＆＃34;页脚＆＃34;被卡在底部，所以当它们从底部向上滚动时它会停留。但是我也不希望它被推得太高而不能在它下面留下空白区域。

我一直试图使用＆＃34;职位：绝对＆＃34;页脚的样式，以保持在底部。但我只是在某个地方阅读，这会使它从常规流程中突然出现，这是导致重叠的原因。

那么如何重新格式化我的样式以允许页脚保持在下方，但不重叠？

HTML：

<html>
<header></header>
<body>
    <div class="content">
        <div class="hd">Content of header</div>
        <div class="bd">Content of body</div>
        <div class="ft">Content of footer</div>
    </div>
</body>
</html>

CSS :(基本部分）

div {
    display: block;
}

*, *:before, *:after {
    box-sizing: inherit;
}

.hd {
    position: static;
    flex: 0 0 auto;
}
.bd {
    position: relative;
    flex: 1 0 auto;
}
.ft {
    position: absolute;
    bottom: 0px;
    flex: 0 0 auto;
}

Answer 1

只需在body的底部添加一个与您的页脚height相等的页边距。

因此，如果您的页脚有height个，100px，那么您需要将其添加到您的css中：

body {
    margin-bottom: 100px;
}

Answer 2

我认为你可能正在寻找位置：固定; 例如：

.footer {
 position: fixed;
 bottom: 0;
}

无论内容如何，都会将页脚粘贴在窗口的底部，因此当您滚动页脚时，页脚将始终保持在底部。然而，这将高于内容（重叠），因此您还需要应用AndrewL的选项来保持内容不受页脚限制。

Answer 3

我按照了sweaver2112建议的链接中的说明，我不得不删除一些重复元素并更改其他元素，最后我的页脚不重叠。必须使用flex才能使其与其他div元素一起使用

.content {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.ft {
  flex: 0 0 50px;
  margin-top: auto;
}

谢谢大家的支持！

我用过的答案的链接：LINK

固定粘性页脚而不重叠体内容

3 个答案: