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）的定义height为500px。

您的拆分器（.handle-inner）的定义height为100％。

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

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

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

此外，在您的body元素中，您不仅拥有.flex-box元素，还拥有nav元素height: 250px元素。根据浏览器处理溢出的方式（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属性（例如flex: 1上的.flex-box）来消耗剩余空间。您可能甚至不需要百分比高度。有关详细信息，请参阅我的回答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;
}

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

高度：100％适用于Chrome，但不适用于Safari

2 个答案: