高度:100%适用于Chrome,但不适用于Safari

Question

我已经制作了一个在Chrome中完美运行的分离器.

但是,它在Safari中不起作用.但是,如果我们在改变高度.handle-inner,从100%到400px,我们会观察到分路器(从顶部向下400px)变为可拖动.这意味着它height:100%在Safari中不起作用.

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

编辑1:

我做了一个更复杂的例子,它的结构与我的真实程序相似.在我的真实程序中,我没有固定高度500px,我使用整个屏幕,并且不想超过它.这是在Chrome中完美运行的分割器,但height:100%在Safari中不起作用.

下面是版本用height: 100vh.我们可以看到Chrome和Safari的高度都太高了.但是,我们不知道如何设置max-height.

Answer 1

您的flex容器(.flex-box)定义height为500px.

您的splitter(.handle-inner)定义height为100%.

但是,.handle它们之间存在,没有确定的高度.Safari认为这是一个缺失的链接,它认为违反了规范,基本上说:

具有百分比高度的元素的父级必须具有已定义的高度,并且必须与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 */

修订演示

此外,作为body列方向Flex容器,您还可以使用flex属性(例如flex: 1on .flex-box)来消耗剩余空间.您可能甚至不需要百分比高度.见我的答案在这里了解详情.

修订演示