<footer> 元素卡在一页顶部

Question

页脚位于我的主页和表单页面的底部。但是有些东西导致页脚出现在我的画廊页面的顶部。我假设这是特异性问题或我的选择器之一。但我是新手，到目前为止我尝试过的一切都没有解决问题。

我的页脚代码是基本的，所以必须有其他东西迫使它到顶部。我检查了图库 ID，其中 none 似乎影响了我的页脚元素。

footer {
background:#333333;
color:#FFFFFF;
padding:10px;
}

/* || gallery-items */
.gallery-item {
 text-align:center;
 width:300px;
 height:300px;
 margin:10px;
 background-color:#ADD8E6;
 border:10px solid #333333;
 border-radius:4px;
 float:left;
 object-fit:contain;
 }

 /* || gallery item hover */
 .gallery-item:hover {
 border-color:#03A9FC;
 }

Here is a link to my Replit. 对于无法评估问题的根源，我深表歉意。这是我做 CSS 造型的第一周。

Answer 1

在 #gallery-content

上添加 overflow: hidden;

#gallery-content{
  overflow: hidden;
}

Answer 2

您的 .gallery-item 具有 float: left;，这意味着这些元素在呈现页面上的其他元素时不会 "considered" 获得任何 space。您可以在图库和页脚元素之间放置样式为 clear: both 的 div（在您的情况下只有 clear:left 有效）以解决此问题

<footer> 元素卡在一页顶部

<footer> element is stuck at top of one page

html

css

footer