Html 主内容div重叠页脚

我参加了一个网页设计课程，我开始自己测试一些东西。我为网页设置了一堆面板，在制作页脚时发现了一个问题

每当我的主体div开始填充并到达页脚时，它就会进入页脚下方，而不是调整网页并向下推。有什么想法吗

div正在进行的图片：

body，
html{
背景色：#bee9e4；
身高：100%；
宽度：100%；
}
.中心{
文本对齐：居中；
}
#横幅{
背景颜色：浅灰色；
背景：线性渐变（向右，#99ffcc，白色，#99ffcc）；
边框样式：凹槽；
}
#关于我{
边框样式：凹槽；
边框宽度：2倍；
边框颜色：浅蓝色；
盒影：0px 2px 2px灰色；
}
#包装纸{
最小高度：100%；
位置：相对位置；
}
#中间板{
边缘顶部：20px；
背景颜色：浅灰色；
左缘：21%；
宽度：58%；
边框样式：凹槽；
溢出：自动；
}
#横幅{
浮动：对；
保证金：5PX20PX10PX5PX；
边框样式：插图；
边框宽度：7px；
边框颜色：浅蓝色；
填充：3倍；
盒影：6px 6px 6px红色；
}
#左面板{
浮动：左；
背景颜色：浅灰色；
宽度：20%；
边框样式：凹槽；
溢出：自动；
}
#右面板{
浮动：对；
背景颜色：浅灰色；
宽度：20%；
边框样式：凹槽；
溢出：自动；
}
#页脚{
背景颜色：浅灰色；
边框样式：凹槽；
溢出：自动；
宽度：100%；
高度：75px；
位置：绝对位置；
底部：0；
左：0；
}
#内容{
填充底部：75px；
/*页脚元素的高度*/
}
.左{
浮动：左；
宽度：45%；
}
.录像带对吗{
浮动：对；
宽度：45%；
}
@仅介质屏幕和（最大宽度：640像素）{
#左面板{
显示：无；
}
#右面板{
显示：无；
}
#页脚{
显示：无；
}
#中间板{
宽度：100%；
左边缘：0%；
}
}
.clearfloat{
明确：两者皆有；
}
h1，
h2，
h3，
h4，
h5，
h6，
p{
左边距：5px；
}

我是大学三年级学生//

我喜欢在学校学习

我喜欢花时间在电脑上























测试左浮动

这是一个测试右浮动

为班级拍摄的照片！
代码
等级
等级
[
]
课堂视频！
您的浏览器不支持视频标记。
您的浏览器不支持视频标记。
斯特斯特

以下是问题的根源：

#footer {
    background-color: lightgrey;
    border-style: groove;
    overflow: auto;
    width: 100%;
    height: 75px;
    position: absolute;  /*  <--- REMOVES ELEMENT FROM NORMAL FLOW */
    bottom: 0;
    left: 0;
}

#页脚{
背景颜色：浅灰色；
边框样式：凹槽；
溢出：自动；
宽度：100%；
高度：75px；
位置：绝对；/*检查jsbin中的输出


更新你的css如下

#footer {
    background-color: lightgrey;
    border-style: groove;
    overflow: auto;
    width: 100%;
    height: 75px;

}


body，
html{
保证金：0；
填充：0；
背景色：#bee9e4；
宽度：100%；
}
.中心{
文本对齐：居中；
}
#横幅{
背景颜色：浅灰色；
背景：线性渐变（向右，#99ffcc，白色，#99ffcc）；
边框样式：凹槽；
}
#关于我{
边框样式：凹槽；
边框宽度：2倍；
边框颜色：浅蓝色；
盒影：0px 2px 2px灰色；
}
#包装纸{
最小高度：100%；
位置：相对位置；
}
#中间板{
边缘顶部：20px；
背景颜色：浅灰色；
左缘：21%；
宽度：58%；
边框样式：凹槽；
溢出：自动；
}
#横幅{
浮动：对；
保证金：5PX20PX10PX5PX；
边框样式：插图；
边框宽度：7px；
边框颜色：浅蓝色；
填充：3倍；
盒影：6px 6px 6px红色；
}
#左面板{
浮动：左；
背景颜色：浅灰色；
宽度：20%；
边框样式：凹槽；
溢出：自动；
}
#右面板{
浮动：对；
背景颜色：浅灰色；
宽度：20%；
边框样式：凹槽；
溢出：自动；
}
#页脚{
背景颜色：浅灰色；
边框样式：凹槽；
溢出：自动；
宽度：100%；
高度：75px；
}
#内容{
填充底部：75px；
/*页脚元素的高度*/
}
.左{
浮动：左；
宽度：45%；
}
.录像带对吗{
浮动：对；
宽度：45%；
}
@仅介质屏幕和（最大宽度：640像素）{
#左面板{
显示：无；
}
#右面板{
显示：无；
}
#页脚{
位置：相对位置；
顶部：50px；
}
#中间板{
宽度：100%；
左边缘：0%；
}
}
.clearfloat{
明确：两者皆有；
}
h1，
h2，
h3，
h4，
h5，
h6，
p{
左边距：5px；
}

丹尼尔介绍网站
欢迎
由丹尼尔C。
我是山景中学的大三学生

我喜欢在学校学习

我喜欢花时间