Html 页脚背景色不显示

我正在为一个网页制作一个简单的模板。在大屏幕上，我的页面如下所示：

!！[1]

在小屏幕上，它看起来像这样：

!！[2]

如图所示，页脚的背景消失了

以下是我的HTML和CSS代码：

正文{
背景色：#bccedc；
}
#内容{
宽度：800px；
左边距：自动；
右边距：自动；
}
/*==标题===*/
#标题{
高度：50px；
背景色：#99ccff；
}
#收割台h1{
文本对齐：居中；
保证金：自动；
填充顶部：10px；
字体大小：25px；
颜色：#3A3A；
文本转换：大写；
字体系列：“世纪哥特式”，“富图拉”，无衬线；
}
#中间的{
显示器：flex；
/*将侧栏与主栏对齐*/
}
/*==侧菜单===*/
#边栏{
浮动：左；
宽度：20%；
背景色：#00cc00；
字体系列：“世纪哥特式”，“富图拉”，无衬线；
}
#边栏ul{
列表样式类型：无；
左边距：自动；
右边距：自动；
}
#侧边栏李{
边缘顶部：10px；
}
#边栏a：链接，
a:参观了{
文字装饰：无；
颜色：#12366d；
}
#侧边栏a：悬停{
颜色：白色；
}
#侧栏a：活动{
颜色：黄色；
}
/*==主要===*/
#主要{
最小高度：500px；
浮动：左；
宽度：85%；
背景色：#ffff99；
}
#主氢{
文本对齐：居中；
字体系列：“世纪哥特式”，“富图拉”，无衬线；
颜色：#373737；
}
#主h3{
字体系列：“世纪哥特式”，“富图拉”，无衬线；
左侧填充：20px；
字体大小：14px；
文本转换：大写；
文字装饰：下划线；
}
#主p{
文本对齐：对齐；
利润率：20px；
字体系列：“Calibri”，“Arial”，无衬线；
}
#主要保险商实验室{
左侧填充：70px；
列表样式图像：url（bullet.png）；
}
#主ol{
左侧填充：70px；
}
#主dt{
字体系列：“Calibri”，“Arial”，无衬线；
文本对齐：对齐；
字体大小：粗体；
左侧填充：40px；
}
#李少爷,，
dd{
字体系列：“Calibri”，“Arial”，无衬线；
文本对齐：对齐；
右边距：30px；
}
#主表，
th，
运输署{
边框：2px实心#003e80；
边界塌陷：塌陷；
高度：40px；
}
#主表{
文本对齐：居中；
垂直对齐：中间对齐；
左边距：自动；
右边距：自动；
宽度：550px；
字体系列：“Calibri”，“Arial”，无衬线；
标题侧：底部；
}
#主th{
背景色：#99ccff；
字体大小：20px；
颜色：#e6f2ff；
}
#主td{
背景色：#e6f2ff；
}
#主td：悬停{
背景色：白色；
}
#主标题{
字体：斜体；
颜色：#003e80；
}
/*==页脚===*/
#页脚{
高度：30px；
填充顶部：20px；
背景色：#99ccff；
}
#页脚>页脚{
保证金：自动；
文本对齐：居中；
字体系列：“世纪哥特式”，“富图拉”，无衬线；
字体大小：14px；
}
/*==响应===*/
@仅介质屏幕和（最大宽度：850px）{
#内容{
宽度：600px；
}
#边栏{
宽度：25%；
}
#主表{
宽度：400px；
}
}
@仅介质屏幕和（最大宽度：650px）{
#内容{
宽度：450px；
}
#中间的{
显示：首字母；
}
#边栏{
显示器：flex；
证明内容：中心；
宽度：100%；
}
#边栏ul{
左边距：30px；
}
#侧边栏李{
浮动：左；
利润率：10px；
}
#主要{
宽度：100%；
}
}

你好，世界
标题






主体
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。酒后驾车
我的心在我的心上，我的心在我的心上。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

页脚在这里

这是因为您的

#main

元素是浮动的。这样，页脚本身的位置“正式地”就在页眉的正下方，因为浮动元素在默认情况下不被其父元素包装。（检入浏览器工具）

添加

清除：两者都有到页脚的CSS以修复此问题：


正文{
背景色：#bccedc；
}
#内容{
宽度：800px；
左边距：自动；
右边距：自动；
}
/*==标题===*/
#标题{
高度：50px；
背景色：#99ccff；
}
#收割台h1{
文本对齐：居中；
保证金：自动；
填充顶部：10px；
字体大小：25px；
颜色：#3A3A；
文本转换：大写；
字体系列：“世纪哥特式”，“富图拉”，无衬线；
}
#中间的{
显示器：flex；
/*将侧栏与主栏对齐*/
}
/*==侧菜单===*/
#边栏{
浮动：左；
宽度：20%；
背景色：#00cc00；
字体系列：“世纪哥特式”，“富图拉”，无衬线；
}
#边栏ul{
列表样式类型：无；
左边距：自动；
右边距：自动；
}
#侧边栏李{
边缘顶部：10px；
}
#边栏a：链接，
a:参观了{
文字装饰：无；
颜色：#12366d；
}
#侧边栏a：悬停{
颜色：白色；
}
#侧栏a：活动{
颜色：黄色；
}
/*==主要===*/
#主要{
最小高度：500px；
浮动：左；
宽度：85%；
背景色：#ffff99；
}
#主氢{
文本对齐：居中；
字体系列：“世纪哥特式”，“富图拉”，无衬线；
颜色：#373737；
}
#主h3{
字体系列：“世纪哥特式”，“富图拉”，无衬线；
左侧填充：20px；
字体大小：14px；
文本转换：大写；
文字装饰：下划线；
}
#主p{
文本对齐：对齐；
利润率：20px；
字体系列：“Calibri”，“Arial”，无衬线；
}
#主要保险商实验室{
左侧填充：70px；
列表样式图像：url（bullet.png）；
}
#主ol{
左侧填充：70px；
}
#主dt{
字体系列：“Calibri”，“Arial”，无衬线；
文本对齐：对齐；
字体大小：粗体；
左侧填充：40px；
}
#李少爷,，
dd{
字体系列：“Calibri”，“Arial”，无衬线；
文本对齐：