Question

我的页脚的最后一部分（当屏幕的高度短于某些特定点（大约938）时，“地址”部分消失了），我想知道为什么吗？

HTML如下所示：

      <div className="container-fluid footer">
          <div className="container contact-block">
             <h3> Contact </h3>
             <p>Telephone:  </p>
             <p>Address:  </p>         
          </div>            
      </div>

所以我的页脚的CSS如下：

.footer{
  height: 12%;
  background-color: rgb(54, 58, 57);
  margin-top: 2%;
  color: antiquewhite;
  position: fixed;
  bottom: 0;
  padding-bottom: 8%;
}
...
.contact-block{
  padding: 1%;
  font-family: Georgia, 'Times New Roman', Times, serif;
}

顺便说一句，我也使用react-bootstrap进行样式设计

Answer 1

由于height: 12%;在一定限制之后，高度变得太小而无法包含元素。

我会重新考虑使用百分比作为高度，但是如果您真的愿意，那么我至少会放上min-height: 100px;之类的东西（或任何根据您的样式设置的最小高度），我相信应该可以解决问题：）

屏幕尺寸变短时，我的页脚未显示所有内容

1 个答案: