CSS-Kind erbt die Höhe nicht. Elternhöhe in VH. Bootstrap 3

Erste Frage hier gestellt. Ich habe mich umgesehen und gegoogelt, aber ich kann keine Lösung für mein Problem finden.CSS-Kind erbt die Höhe nicht. Elternhöhe in VH. Bootstrap 3

Ich habe ein Elternteil (Bootstrap Zeile), die eine berechnete Höhe, 100vh - 140px aufnimmt. Das funktioniert großartig, aber ich kann nicht erreichen, dass Kinder prozentual Elternteile aufnehmen. Ich habe 3 Divs drin. Ich will, dass man 100% seiner Elterngröße und die anderen beiden 40% und 60% nimmt.

Ich habe gelesen, dass "Höhe: erben;" sollte funktionieren, tut es aber nicht. Aus Gründen der Kompatibilität habe ich auch die maximale Höhe mit dem gewünschten Prozentsatz hinzugefügt.

Ich habe Chrome, Firefox und Safari ausprobiert.

CSS-Code:

// Parent 
#start-page { 
    min-height: calc(100vh - 140px); 
} 
// Children 
#init-square-1 { 
    height: inherit; 
    max-height: 100%; 
} 
#init-square-2 { 
    height: inherit; 
    max-height: 40%; 
} 
#init-square-3 { 
    height: inherit; 
    max-height: 60%; 
} 
HTML: 
    <section id="start-page" class="row"> 
     <div id="init-square-1" class="col-xs-12 col-sm-6"></div> 
     <div id="init-square-2" class="col-xs-12 col-sm-6"></div> 
     <div id="init-square-3" class="col-xs-12 col-sm-6"></div> 
    </section>

Quelle

2016-09-01 Kaffia

"vererben" kann nicht funktionieren, wenn es nichts gibt, von dem er erben kann (und das nicht, weil das Elternelement keine explizite Höhe hat.) Sie geben hier keine Höhen an, sondern nur min -Höhen, könnte ein zusätzliches Problem sein. Ich würde wirklich empfehlen, dass Sie in flexbox schauen, das sollte besser sein, um zu erreichen, was Sie wollen. – CBroe

Vielen Dank für die schnelle Antwort und Erklärung! Wenn es nach mir ginge, würde ich definitiv Flexbox verwenden, aber ich muss bei diesem Projekt an Bootstrap bleiben. – Kaffia

height: inherit; bedeutet nicht, dass die erbt die Höhe von dem Elemente Eltern aber von der übergeordneten Konfiguration, so von der div in diesem Fall. Die Standardhöhe des Elements div ist 0, daher wird 0 geerbt.

Ich bin mir nicht sicher, welche Größe Sie festlegen möchten, aber wenn das die gleiche Höhe wie #start-page sein müssen, stellen Sie die Höhe auf 100%

height:100%;

Auch könnte es erforderlich sein (nicht sicher,), die eine Position der Außenbehälter zu geben:

#start-page { 
    min-height: calc(100vh - 140px); 
    position:relative; 
}

Quelle

2016-09-01 12:54:14

relativ Wie sich herausstellt, alles, was ich brauchte, war zu tun, um die Eltern Höhe nur

height: calc(100vh - 140px);

ändern

statt:

min-height: calc(100vh - 140px);

also den Trick 'min' aus großer Höhe zu entfernen.

Danke für die Hilfe!

Quelle

2016-09-01 13:13:39 Kaffia

CSS-Kind erbt die Höhe nicht. Elternhöhe in VH. Bootstrap 3

Antwort

Verwandte Themen