Html 页脚与开发人员控制台视图一起出现

我正试图创建一个页脚，但当我在Chrome上打开控制台视图时，页脚会随控制台一起出现。我看过很多其他人也有同样的问题，但他们通过将页脚的位置设置为固定或绝对来修复它，但是当我尝试这两种方法时，仍然得到相同的结果

我已经看过的线程：

以下是我的CSS当前的样子：

html，
身体{
身高：100%；
最小高度：100%；
}
.页脚{
宽度：100%；
底部：0px；
左：0px；
高度：100px；
位置：固定；
背景色：#7272；
}
.页脚p{
颜色：白色；
}

测试

以下是如何让您的页脚始终保持向下，而不使用

位置：固定

，使用您的示例：

正文{
显示器：flex；
弯曲方向：立柱；
最小高度：100vh；
保证金：0；
}
梅因先生{
柔性生长：1；
}
.页脚{
flex-grow:0；
背景色：#7272；
}
.页脚p{
颜色：白色；
}

把你的内容放在这里。。。
测试

我也需要

main

类吗？flex grow还有什么功能？您不需要它，但我使用它来选择特定的元素。当父对象的长度大于子对象的长度时（在我们的例子中，长度是高度，因为

flex direction

是

column

），它根据

flex grow

分配正空间。因为

.footer

具有

flex-grow:0

，所以它不会增长，而

.main

具有

1

并会增长。正确完整的布局示例如下。它使用语义正确的元素并包含

。我刚刚尝试过，但仍然得到相同的结果@Andrei_Gheorghiu如果您还单击代码下的“展开代码段”按钮，您可以看到页脚仍然会随着Chrome控制台一起上升。