身高：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-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; 
} 

編輯：如果您遇到溢出，像你說這個

.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; 
} 

更換你的CSS。嘗試一個高度/最大高度屬性。