为什么页脚没有粘在页面底部？

Question

我制作的页脚没有粘在页面底部，而是粘在其前面的部分。

我尝试改变页脚栏的位置，例如绝对和相对，因为我认为它会粘在底部。

Answer 1

如果没有显示代码，很难回答。

但一般来说，人们会采用多种方法，有些使用弹性盒、网格或高度。

我认为受影响最大的是高度，我创建了一个布局并创建了标题，一旦完成，我检查导航栏的高度是多少。

然后只需在标题后面添加一个

<main>

标签，在主内容后面添加一个

<footer>

标签。

然后只需将

min-height

添加到主标签即可。假设我的标题是

100px

那么我会添加：

main{
    min-height: calc(100px-100vh);
}

这样，页面的正文部分将占页面的 100% 减去 100px（页眉的高度），使页脚一直向下，直到滚动才可见。

但是，如果您希望页眉和页脚可见，则适用相同的规则，只需使用检查器检查页脚的高度，然后应用相同的公式。

main{
    min-height: calc(100px+300px-100vh)
}

在上面的代码中，

100px

是页眉的高度，

300px

是页脚的高度，视口高度的剩余部分将成为正文部分或主要部分的高度。