Html 隐藏在页脚下的第三个div元素

第三个div元素隐藏在页脚下，如下所示：

如何使第三个div元素完整显示

CSS/HTML:

.places{
显示器：flex；
柔性包装：包装；
证明内容：中心；
}
.地点h1{
对齐内容：左上角；
字体大小：30px；
宽度：100%；
}
.放置物品{
宽度：390px；
边框：#FF5A5F 1px实心；
边界半径：4px；
填充：20px；
利润率：20px；
}
.放置第h2条{
字体大小：30px；
文本对齐：居中；
}
.按夜定价{
颜色：#FF5A5F；
边框：4px实心#FF5A5F；
边界半径：50%；
最小宽度：60px；
最大宽度：60px；
高度：60px；
字体大小：30px；
文本对齐：居中；
保证金：0；
浮动：对；
线高：60px；
}
.信息{
高度：80px；
边框顶部：#DDDDDD 1px实心；
边框底部：#DDDDDD 1px实心；
}
马克斯先生{
背景图片：url（“images/icon_group.png”）；
背景重复：无重复；
背景大小：45%45%；
背景位置：中上；
宽度：100px；
显示：内联块；
利润率：7px；
线高：110px；
文本对齐：居中；
}
.房间数量{
背景图片：url（“images/icon_bed.png”）；
背景重复：无重复；
背景大小：45%45%；
背景位置：中上；
宽度：100px；
显示：内联块；
利润率：7px；
线高：110px；
文本对齐：居中；
}
.浴室数量{
背景图片：url（“images/icon_bath.png”）；
背景重复：无重复；
背景大小：45%45%；
背景位置：中上；
宽度：100px；
高度：自动；
显示：内联块；
利润率：7px；
线高：100px；
文本对齐：居中；
}
.用户{
边缘底部：10px；
}
.说明{
文本对齐：左对齐；
浮动：左；
}
/*页脚*/
页脚{
位置：固定；
高度：60px；
宽度：100%；
线高：60px；
边框顶部：实心1px#cccc；
底部：0px；
背景色：白色；
文本对齐：居中；
}

地点
$80
家
3位客人
2个房间
1浴室
所有者：约翰·列侬
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。
它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着
桌面发布软件，如Aldus PageMaker，包括Lorem Ipsum版本。
$65
公寓
3位客人
2个房间
1浴室
所有者：蒂娜·菲
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。
它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着
桌面发布软件，如Aldus PageMaker，包括Lorem Ipsum版本。
$20
宿舍
3位客人
2个房间
1浴室
所有者：洛莉
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。
它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着
桌面发布软件，如Aldus PageMaker，包括Lorem Ipsum版本。
页脚

在article.dorm中添加一个100px的底部边距

article.dorm {margin-bottom: 100px; }

我是回应性地看的，实际上你需要：

.places {margin-bottom: 100px; }

---

只需在身体底部添加一些填充物

body{
 padding-bottom:50px;
}

---

您可以在最后一个

中添加一个与页脚一样高或更高的底部边距，方法是：

article:last-of-type {
    margin-bottom: 70px;
}

.places{
显示器：flex；
柔性包装：包装；
证明内容：中心；
}
.地点h1{
对齐内容：左上角；
字体大小：30px；
宽度：100%；
}
.放置物品{
宽度：390px；
边框：#FF5A5F 1px实心；
边界半径：4px；
填充：20px；
利润率：20px；
}
.放置第h2条{
字体大小：30px；
文本对齐：居中；
}
.按夜定价{
颜色：#FF5A5F；
边框：4px实心#FF5A5F；
边界半径：50%；
最小宽度：60px；
最大宽度：60px；
高度：60px；
字体大小：30px；
文本对齐：居中；
保证金：0；
浮动：对；
线高：60px；
}
.信息{
高度：80px；
边框顶部：#DDDDDD 1px实心；
边框底部：#DDDDDD 1px实心；
}
马克斯先生{
背景图片：url（“images/icon_group.png”）；
背景重复：无重复；
背景大小：45%45%；
背景位置：中上；
宽度：100px；
显示：内联块；
利润率：7px；
线高：110px；
文本对齐：居中；
}
.房间数量{
背景图片：url（“images/icon_bed.png”）；
背景重复：无重复；
背景大小：45%45%；
背景位置：中上；
宽度：100px；
显示：内联块；
利润率：7px；
线高：110px；
文本对齐：居中；
}
.浴室数量{
背景图片：url（“images/icon_bath.png”）；
背景重复：无重复；
背景大小：45%45%；
背景位置：中上；
宽度：100px；
高度：自动；
显示：内联块；
利润率：7px；
线高：100px；
文本对齐
.places {margin-bottom: 60px}

   body {
     padding-bottom: 60px;
   }