Question

Safari不会在我的全高部分采用保证金底部。有没有人遇到这个问题？

我做了一个快速的小提琴 - ＆gt; https://jsfiddle.net/m34hr01s/

它适用于chrome和firefox，但不适用于safari：/

我使用bootstrap和wordpress

<body>
  <header></header>
  <section></section>
  <footer></footer>
</body>


html,body{
  width:100%;
  height:100%;
  position:relative;
  margin:0;
}

header{
  width:100%;
  height:50px;
  background:#3D2D34;
  position:absolute;
  left:0;
  top:0;
  z-index:3;
}

section{
  width:100%;
  height:100%;
  background:#799C94;
  z-index:10;
  margin-bottom:100px;
}

footer{
  width:100%;
  height:100px;
  background:#E3E29F;
  position:fixed;
  left:0;
  bottom:0;
  z-index:-1;
}

Answer 1

使用height的百分比允许指定相对于父容器维度的维度，而不是相对于容器内的可用空间。

CSS2

％指定百分比高度。百分比是根据生成的包含块的高度计算的。

说，当盒子被其他对象部分填充时尝试使用100%是错误的。如果您真的想使用您的代码，那么可接受的解决方案就是

header {
    position: relative;
}

section {
    height: calc(100% - 100px - 50px);
}

但calc应该是您的最后选择，所以我真的鼓励您尽可能多地使用flex。

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column; /* We are stacking boxes in column. */
  justify-content: space-between; /* Content is spread across all the free space. */
}

header {
  flex: 0 0 50px; /* Exactly 50px. */
  background: #3D2D34;
}

section {
  flex: 1; /* All the free space is mine. */
  margin-bottom: 100px;
  background: #799C94;
}

footer {
  position: fixed;
  width:100%;
  height:100px;
  left:0;
  bottom:0;
  background: #E3E29F;
}

JSFiddle

野生动物园的边缘问题

1 个答案: