height:100% 适用于 Chrome 但不适用于 Safari [重复]

Question

我制作了一个splitter，它在 Chrome 中完美运行。

但是，它在 Safari 中不起作用。但是如果我们将.handle-inner 中的高度从100% 更改为400px，我们将观察到拆分器（从上到下到400px）变得可拖动。这意味着 height:100% 在 Safari 中不起作用。

有谁知道如何修改代码以使拆分器在 Chrome 和 Safari 中都可以工作？

编辑 1：

我做了一个更复杂的例子，它的结构与我的真实程序相似。在我的真实程序中，我没有将高度固定为500px，我使用整个屏幕，并且不想超过它。这是 splitter 在 Chrome 中完美运行，但 height:100% 在 Safari 中无法运行。

这是version 和height: 100vh。我们可以看到 Chrome 和 Safari 的高度都太大了。但是，我们不知道如何设置max-height。

Answer 1

您的 flex 容器 (.flex-box) 有一个定义为 500 像素的 height。

您的拆分器 (.handle-inner) 已定义为 100% 的 height。

但是，存在于它们之间的.handle 没有定义的高度。 Safari 认为这是一个缺失的链接，它认为这违反了spec，它本质上说：

具有百分比高度的元素的父元素必须具有定义的高度，并且必须具有height 属性。否则，具有百分比高度的元素必须默认为height: auto（内容高度）。

因此，您需要将height: 100% 添加到.handle。

---

此外，在您的body 元素中，您不仅有您的.flex-box 元素，而且您还有一个带有height: 250px 的nav 元素。根据浏览器处理溢出的方式（250px + 100%），这可能会导致您的拆分器元素在屏幕外消失，这在 Safari 中会发生。

为避免该问题，请对您的代码进行以下调整：

 * { box-sizing: border-box; }   /* include borders and padding in width
                                    and height calculations */

 .flex-box { height: calc(100% - 250px); } /* compensate for nav height */

revised demo

---

另外，由于body 是一个列方向的弹性容器，您还可以使用弹性属性（例如.flex-box 上的flex: 1）来消耗剩余空间。您甚至可能不需要百分比高度。详情见我的回答here。

revised demo

Answer 2

尝试将 .handle-inner 中的高度从 100% 更改为 100vh。像这样设置后备：

.handle-inner {
  width: 10px;
  margin-left: -5px;
  height: 100%;
  height: 100vh;
}

编辑：用这个替换你的 CSS

.flex-box {
  display: flex;
  width: 100%;
  height: 500px;
}
.flex-box .col {
  border: 1px solid grey;
  flex: 1;
}
.handle {
  width: 1px;
  text-align: center;
  background: grey;
  transition: all ease-in 0.1s;
}
.draggable {
  background: grey;
}

.handle {
  width: 0.0000001px;
  transition: all ease-in 0.1s;
  z-index: 999;
  background: grey;
}

.handle-inner {
  width: 10px;
  margin-left: -5px;
  height: 100%;
  height: 100vh;
}

如果您遇到溢出，就像您说的那样。尝试使用高度/最大高度属性。