html - Safari/Chrome flex-parent 100% height + padding 和 100% height child

Question

Safari 使 child block 的高度大于 Chrome。

我需要在 Chrome 和 Safari 中实现相同的阻止行为。

Chrome 中的内边距会影响 child 的高度。 Safari 中的填充总和为 height。

.body {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  height: 100%;
}

.header {
  height: 60px;
  width: 100%;
}

.ctn {
  height: 100%;
  width: 100%;
  padding-bottom: 80px;
}

.ctn__child {
  min-width: 100%;
  height: 100%;
}

https://jsfiddle.net/zqjpzLLb/

Answer 1

使用 JSFiddle 时，您的 iframe 客户端高度是否相同？因为这些也会影响高度。

我已经设法使用以下代码获得相同高度的跨浏览器:

* {box-sizing: border-box;}

body, html {
  height: 100%;
}

.body {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%;
  background-color: #4f4;
}

.header {
  height: 60px;
  width: 100%;
  background-color: #4a4;
}

.ctn {
  display: inherit; /* Inherit display flex for __child grow inside */
  flex-grow: 1; /* Make sure it fills up the remaining parent space */
  width: 100%;
  padding-bottom: 80px;
  background-color: blue;
}

.ctn__child {
  flex-grow: 1; /* Let the child fill all the remaining space inside the .ctn class */
  min-width: 100%;
  background-color: rgba(255, 100, 100, .8);
}

<div class="body">
  <div class="header">Header</div>
  <div class="ctn">
    <div class="ctn__child">
      child
    </div>
  </div>
</div>

https://jsfiddle.net/zqjpzLLb/17/