Wie teilt man die verbleibende Höhe zwischen zwei Elementen auf?

Dies ist ein ziemlich häufiges Problem, zu dem ich noch eine elegante Lösung finden muss:Wie teilt man die verbleibende Höhe zwischen zwei Elementen auf?

Ich habe ein paar Blockelemente (sagen wir 4) in einem div. Ein sehr einfaches vertikales Layout.

Die ersten beiden Elemente haben feste Höhen. Die verbleibenden zwei Elemente sollten den verbleibenden Raum aufteilen (d. H. Körperhöhe - Erstelementhöhe - Zweitelementhöhe).

Ich weiß, ich kann nur die Größen berechnen, aber gibt es eine elegante Möglichkeit, dies zu erreichen?

Ich möchte eine Lösung, die entweder native Browserfunktionen verwendet (es ist eine interne App, die nur auf modernen Firefox/Chrome-Versionen läuft, also blutig ist, ist in Ordnung) oder jQuery/jQuery UI (wir verwenden es bereits).

Quelle

2012-04-05 futlib

Verwenden CSS3 Flexbox Layout: http://www.html5rocks.com/en/tutorials/flexbox/quick/

Quelle

2012-04-05 05:52:00 ninjagecko

ich die spec gescannt haben, kann aber nicht sehen, wie mein Problem mit Flexbox zu lösen. Möchten Sie ein Beispiel gemeinsam hacken? – futlib

@futlib: der Link, den ich gab, hat genau das, was man als Beispiel verlangt (allerdings mit 'box-orient: horizontal' und nur 1 und nicht 2 Elementen mit fester Höhe). – ninjagecko

Danke, das macht es! Ich habe diesen Artikel ignoriert, weil er gesagt hat, dass er veraltet ist und sich für die Spezifikation entschieden hat (was auch nach einigen weiteren Untersuchungen erlaubt). Das Hinzufügen von Anbieterpräfixen zu den Beispielen in diesem Artikel funktioniert jedoch. – futlib

Spielen Sie mit percantage Wert xx (%) und nicht xx (px) für die Höhe und Breite.

Quelle

2012-04-05 05:52:09 Mikey3Strings

Sie können jQuery für die Berechnung der Höhe verwenden.

angenommen, wir haben:

<div id="parent" style="height:300px; background-color: red;"> 
    <div id="first" style="height:100px; background-color: blue;"> 
    </div> 
    <div id="second" style="height:100px; background-color: #c6c6c6;"> 
    </div> 

    <div id="third" style="background-color: #75ac19;" ></div> 
    <div id="fourth" style="background-color: black;"></div> 
</div> 

<script type="text/javascript"> 
    var parrentHeight= $("#parent").height(); 
    var firstBlock = $("#first").height(); 
    var secondBlock = $("#second").height(); 
    var remainingHeight = parrentHeight - (firstBlock + secondBlock); 
    $("#third, #fourth").height(remainingHeight/2); 
</script>

Quelle

2012-04-05 07:10:55 undefined

So habe ich es immer gemacht, ich suche nach modernen Alternativen. – futlib

Leider gibt es keine Methode für dieses sehr spezifische Styling, Sie können eine JavaScript-Funktion schreiben, die die Aufgabe erfüllt, indem Sie Parameter an sie übergeben. – undefined

Wie teilt man die verbleibende Höhe zwischen zwei Elementen auf?

Antwort

Verwandte Themen