当屏幕尺寸变小时，我的页脚没有显示所有内容

Question

我的页脚的最后一部分（当屏幕高度小于某些点时"address"部分消失了，大约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; 的东西（或者任何基于你的风格的最小高度），我相信应该可以解决问题:)

当屏幕尺寸变小时，我的页脚没有显示所有内容

My footer doesn't show all the content when the screen size gets shorter

html

css

footer

twitter-bootstrap

react-bootstrap