Html 页脚显示在主屏幕顶部

我的页脚显示在主页脚的顶部。我已经找了好几天来解决这个问题，但似乎找不到解决办法。我的老师也找不到。我希望你们中的一些人能够看到问题所在，并且非常感谢花时间来研究它！它快把我逼疯了

非常感谢您提前通知

这是你的电话号码

html{
框大小：边框框；
字体大小：62.5%；
字体系列：“Fira Sans”；
滚动行为：平滑；
}
*,
*：之前，
*：之后{
框大小：继承；
}
@字体{
字体系列：“Fira Sans”；
src:url（../assets/fonts/FiraSans Regular.otf）格式（'opentype'）；
}
@字体{
字体系列：“Fira Sans Light”；
src:url（../assets/fonts/FiraSans Light.otf）格式（'opentype'）；
}
@字体{
字体系列：“Fira Sans Heavy”；
src:url（../assets/fonts/FiraSans-Heavy.otf）格式（'opentype'）；
}
@字体{
字体系列：“Fira Sans Extra Bold”；
src:url（../assets/fonts/FiraSans ExtraBold.otf）格式（'opentype'）；
}
@字体{
字体系列：“Fira Sans Hair Italic”；
src:url（../assets/fonts/FiraSans HairItalic.otf）格式（'opentype'）；
}
@字体{
字体系列：“月亮”；
src:url（../assets/fonts/Moon Light.otf）格式（'opentype'）；
}
.bg头{
背景图像：url（../assets/img/paintdrop-test-01-01.svg）；
身高：77.5雷姆；
宽度：128.6雷姆；
;
背景重复：无重复；
背景位置：顶部；
保证金：0自动；
}
.货柜头{
宽度：96rem；
保证金：0自动；
显示器：flex；
弯曲方向：立柱；
}
导航{
显示器：flex；
证明内容：中心；
填充：4rem 0rem；
}
导航ul{
显示器：flex；
证明内容：之间的空间；
宽度：50%；
}
李国荣{
列表样式：无；
显示：内联；
}
a{
文字装饰：无；
颜色：黑色；
文本转换：大写；
字体系列：“Fira Sans”；
字母间距：.2em；
字体大小：1.5rem；
显示：块；
填充：1rem2rem；
}
.link:悬停
/*，a:not（[class=“button wit”]）*/
{
颜色：白色；
边界半径：1.5雷姆；
背景：线性梯度（向左，#363795，#005c97）；
转换：所有.2易入易出；
}
.头衔{
显示器：flex；
背景图像：url（../assets/img/blue monday title.svg）；
背景重复：无重复；
背景位置：中心；
宽度：100%；
高度：50雷姆；
}
h1{
字体大小：13.5rem；
文本转换：大写；
字体系列：“Fira Sans Heavy”；
}
.隐藏{
显示：无；
}
.介绍{
字号：2rem；
字母间距：.15rem；
线高：1.5；
宽度：45%；
左边距：37雷姆；
保证金上限：-22雷姆；
字体系列：“Fira Sans Light”；
}
.btn类{
显示器：flex；
证明内容：中心；
过渡：所有1都易于输入输出；
}
.按钮蓝色{
保证金：10雷姆0雷姆5雷姆10雷姆；
颜色：白色；
边界半径：1.5雷姆；
背景：线性梯度（向左，#363795，#005c97）；
}
.蓝色按钮：悬停{
转换：比例（1.1）；
}
主要{
边缘顶部：7雷姆；
}
氢{
字体系列：“Fira Sans Extra Bold”；
字母间距：.18rem；
字体大小：6.5rem；
}
/*.bg主要小型{
背景图像：url（../assets/img/splash-drop-small-01.svg）；
高度：40雷姆；
宽度：40雷姆；
背景位置：左；
背景重复：无重复；
位置：绝对位置；
左边距：5雷姆；
} */
.bg主要大{
背景图像：url（../assets/img/splash-drop-02-01.svg）；
高度：70雷姆；
宽度：100%；
背景位置：右；
背景重复：无重复；
}
.货柜干管{
宽度：96rem；
保证金：0自动；
显示器：flex；
弯曲方向：立柱；
}
.第1条{
显示器：flex；
弯曲方向：立柱；
最高保证金：30雷姆；
左边距：5雷姆；
}
.第条案文{
边缘顶端：2rem；
字体系列：“Fira Sans Light”；
字号：2rem；
字母间距：.1rem；
线高：3.2rem；
宽度：50%；
}
.bg流量{
边缘顶部：5雷姆；
背景图像：url（../assets/img/flow_1.svg）；
高度：120雷姆；
宽度：100%；
背景位置：中心；
背景重复：无重复；
}
.第2条{
颜色：白色；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
边缘顶部：45雷姆；
}
.中{
文本对齐：居中；
宽度：70%；
}
.按钮式机智{
颜色：白色；
边界半径：1.5雷姆；
边缘顶部：5雷姆；
边框：.1淡白色；
}
.按钮智慧：悬停{
背景色：白色；
颜色：#005c97；
}
.第3条{
显示器：flex；
边缘顶部：45雷姆；
}
.blue moonday文本{
显示器：flex；
弯曲方向：立柱；
左：5雷姆；
}
.对{
宽度：100%；
}
.footer img{
背景图像：url（../assets/img/footer-splashs-01.svg）；
背景重复：无重复；
高度：30雷姆；
宽度：100%；
}
.容器页脚{
宽度：96rem；
保证金：0自动；
显示器：flex；
弯曲方向：立柱；
对齐项目：柔性端；
证明内容：之间的空间；
文本对齐：右对齐；
垫顶：25rem；
}
页脚李{
高度：8雷姆；
列表样式：无；
文字装饰：无；
}
.社交媒体{
垫面：5rem；
显示器：flex；
证明内容：之间的空间；
}

蓝色星期一





他是恩格海姆·梅尔。马恩达根·齐伊恩·埃希特·库塔根。他是一个很好的人，但他是一个很好的人

您的.bg flow div具有固定高度。 把它扔掉

另外，我建议您从.container页脚中删除flex参数，因为它不是显示的元素流的一部分。弹性项目必须是连续的。您已经将container main中的元素定义为flex，但这在您的页脚中

最后一点，我不知道您是否希望这些页脚链接具有这种垂直外观，如果不希望，我认为您应该定义：

footer ul li {
    display: inline-block; // or float: left; as you prefer.
}

---

让我知道它是否适合您。

您的.bg flow div具有固定高度。 把它扔掉