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

Posted 2023-03-21

【中文标题】当屏幕尺寸变短时，我的页脚不会显示所有内容

【英文标题】：My footer doesn't show all the content when the screen size gets shorter

【发布时间】：2020-09-26 00:09:58

【问题描述】：

我的页脚的最后一部分（当屏幕的高度小于某些点时，“地址”部分会消失，大约 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 进行样式设置

【问题讨论】：

可能是因为你有一个height: 12%;，当它被删除时它会工作吗？

@Dejan.S 谢谢！它有效

【参考方案1】：

这是因为height: 12%;在一定限制后高度变得太小，不能包含元素。

我会重新考虑使用百分比作为高度，但如果你真的想要，那么我至少会输入 min-height: 100px; 之类的东西（或任何基于你的风格的最小高度），我相信这应该可以解决问题:)