Höhe: 100% funktioniert in Chrome aber nicht in Safari

Question

Ich habe eine splitter gemacht, die perfekt in Chrome funktioniert.

Allerdings funktioniert es nicht in Safari. Aber wenn wir die Höhe in .handle-inner von 100% zu 400px ändern, werden wir beobachten, dass der Splitter (von oben nach unten zu 400px) ziehbar wird. Das heißt, es ist height:100%, die in Safari nicht funktioniert haben.

Kann jemand den Code ändern, damit der Splitter sowohl in Chrome als auch in Safari funktioniert?

Edit 1:

Ich machte ein komplexeres Beispiel, die eine ähnliche Struktur wie mein wirkliches Programm. In meinem realen Programm fixiere ich die Höhe nicht als 500px, ich benutze den ganzen Bildschirm und möchte diesen nicht überschreiten. Hier ist die splitter, die perfekt in Chrome funktioniert, aber height:100% funktioniert nicht in Safari.

Hier ist die version mit height: 100vh. Wir konnten sehen, dass die Höhe in Chrome und Safari zu hoch ist. Wir wissen jedoch nicht, wie man max-height setzt.

Answer 1

Ihr Flex-Container (.flex-box) hat eine definierte height von 500px.

Ihr Splitter (.handle-inner) hat eine definierte height von 100%.

Allerdings hat .handle, die zwischen ihnen existiert, keine definierte Höhe. Safari sieht dies als fehlendes Glied, das es eine Verletzung der spec hält, die im Wesentlichen sagt:

Die Eltern ein Elements mit einer prozentualen Höhe eine definierte Höhe aufweisen muss und es muss mit der height Eigenschaft sein. Andernfalls muss das Element mit einer prozentualen Höhe standardmäßig height: auto (Inhaltshöhe) sein.

Daher müssen Sie height: 100% zu .handle hinzufügen.

---

Auch in Ihrem body Element, Sie haben nicht nur Ihr .flex-box Element, aber Sie haben auch ein nav Element mit height: 250px. Abhängig davon, wie ein Browser den Überlauf behandelt (250px + 100%), kann dies dazu führen, dass Ihr Splitterelement außerhalb des Bildschirms verschwindet, was in Safari geschieht.

dieses Problem zu vermeiden, diese Anpassungen an Ihrem Code machen:

* { 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

---

auch sein, dass body eine Spaltenrichtungsflex Behälter ist, können Sie auch Flex-Eigenschaften (wie flex: 1 auf .flex-box), um verbleibenden Speicherplatz zu verbrauchen. Sie brauchen vielleicht nicht einmal prozentuale Höhen. Siehe meine Antwort here für Details.

revised demo

Answer 2

Versuchen Sie, Ihre Höhe in .handle-inner von 100% auf 100vh zu ändern. Stellen Sie es so mit einem Sturz wieder nach oben:

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

Edit: Ersetzen Sie Ihre CSS mit diesem

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

Wenn Sie Überlauf auftreten, wie Sie angegeben. Probieren Sie eine height/max-height Eigenschaft aus.