Höhe: 100% auf innerem Div in semantischen UI-Spalte in Safari

Question

unterbrochen

Ich versuche Semantic UI zu verwenden, um eine Zeile von Spalten gleicher Höhe zu erstellen, die durch einen Gutter getrennt sind. Meine Lösung funktioniert in Chrome und Firefox, aber nicht in Safari (ich habe IE noch nicht getestet). Safari-Entwicklungstools zeigen, dass jede Spalte die gleiche Höhe wie erwartet hat, aber das Erstellen eines .inner div und das Festlegen der Höhe auf 100% hat keinen Einfluss auf die Höhe von .inner.

Ich glaube, ich brauche die .inner div um für jeden Block eine Hintergrundfarbe getrennt durch eine Gosse zu haben.

Here's ein JSFiddle, um das Problem zu veranschaulichen. Für mich macht es so in Chrome:

und wie dies in Safari:

Ich bin nicht sicher, ob dies ein Fehler in WebKit ist (oder sogar blinken/Gecko!), fand ich eine similar bug in webkit, aber es ist als fest/aufgelöst markiert.

Wenn es nichts falsch an meinem Ansatz ist, kann jemand einen Workaround vorschlagen? Vorzugsweise ohne Patchen mit JavaScript.

Answer 1

Könnten Sie bitte display:table; verwenden, wird es funktionieren.

.inner { 
 
    height: 100% 
 
} 
 
body { 
 
    font-family: "helvetica"; 
 
    background: white; 
 
} 
 
#column-1 { 
 
    background: #e3e0cf; 
 
} 
 
#column-2 { 
 
    background: #9fa8a3; 
 
} 
 
.equal { display:table; } 
 
.column { display:table-cell; }

<div class="ui stackable equal height grid"> 
 
    <div class="six wide column" id="column-1"> 
 

 
    <h1>Column 1</h1> 
 

 
    </div> 
 
    <div class="six wide column" id="column-2"> 
 

 
    <h1>Column 2</h1> 
 
    <ul> 
 
     <li>First</li> 
 
     <li>Second</li> 
 
     <li>Third</li> 
 
    </ul> 
 

 
    </div> 
 
</div>

Answer 2

Dies ist ein bekanntes Problem in der Tat in Safari. Um dies zu umgehen, definieren Sie eine height -Eigenschaft unter .uigrid .column und setzen Sie Ihre Höhe auf div.inner, um 'zu erben'. Nachfolgend finden Sie eine CSS-Code, der in Safari-Browser funktioniert:

div.inner{ 
    height:inherit; 
    background-color:gold; 
} 

.ui.grid .column{ 
    height:25vh; 
} 

Screenshot: