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

Posted 2023-03-06

【中文标题】height:100% 适用于 Chrome 但不适用于 Safari [重复]

【英文标题】：height:100% works in Chrome but not in Safari [duplicate]

【发布时间】：2017-09-08 23:02:51

【问题描述】：

我制作了一个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。

【问题讨论】：

您需要在这里给出一个显示问题的标记示例，而不是第三方网站，明天可能会改变或消失，对任何人都没有帮助。 ***.com/help/mcve

【参考方案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

【讨论】：

太好了，它可以工作了...此外，如果我们将margin-right: -5px 添加到.handle-inner，它将使拆分器更容易拖动。另外，在我的真实程序中，body 中的height: 100% 比height: 100vh 好（这使得整个东西的高度比我的屏幕长）。谢谢...

这救了我。谢谢！

【参考方案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;

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

【讨论】：

添加height: 100vh后，你会看到下面的拆分器开箱即变成可拖动的……太长了……

我看到你删除了你的 Plunker 链接。我没有经历过。我在 Chrome 和 Safari 中都打开了链接。在高度上使用 vh 单位时，它们的性能完全相同

我没有删除我的 plunker 链接，并且您放置的链接不包含 height: 100vh。

我现在明白了。我的错。我正在寻找一个运行代码 sn-p 按钮。请参阅上面的编辑。

好吧，我同意您的修复适用于我最初的请求。但我感觉height: 100vh; max-height: 500px 是个黑客。我更愿意了解错误在哪里，并有一个更彻底的解决方案。让我们稍等一下，看看有没有其他的提议，我可能稍后再回复你的答案……