Set Anfangshöhe von div auf, wie viel Platz im Inneren div der Eltern bleibt

Question

Ich habe 3 divs:

.main_content, .content_top, .content_bottom

.main_content ist auf 100 %, aber 100% ist nicht die Größe des Browserfensters, es befindet sich in der Mitte meiner Seite.

.content_top ist auf 60% Höhe eingestellt.

Ich möchte die Höhe von .content_bottom auf den Rest des verfügbaren Speicherplatzes in .main_content via Javascript setzen.

Zum Beispiel, wenn .main_content war 800px hoch, und .content_top war 600px hoch, ich möchte .content_bottom auf 200px setzen.

Dies ist ein vereinfachtes Beispiel, meine Situation ist nicht so einfach wie 40% angeben oder den Browser zu verlassen, um zu entscheiden. Zum einen gibt es momentan 46px Padding auf .content_top. Ich mache eine geteilte Bildschirm-ähnliche Schnittstelle zwischen .content_top und .content_bottom und ziehe eine Leiste, um beide zu skalieren. Dies funktioniert meistens, nur Probleme mit dem unteren Teil. Die Fähigkeit, ".content_bottom" auf eine bestimmte Höhe (d. H. 198px) zu setzen, würde alle meine derzeitigen Probleme lösen. Ich freue mich auf dieses Beispiel näher eingehen zu können, aber auch auf den eigentlichen Code zu schauen, aber ich hatte gehofft, dass es eine einfache Methode zur Berechnung gibt und ich hatte Probleme, ein gutes Beispiel dafür zu finden, dass Cross-Browser funktioniert, danke!

Answer 1

Angenommen, Sie sind mit Vanille JavaScript (und nicht eine Bibliothek), würde ich vorschlagen:

​var cBs = ​document.getElementsByClassName('content_bottom'); 

for (var i=0,len=cBs.length; i<len; i++){ 
    var p = cBs[i].parentNode; 
    cBs[i].style.height = (parseInt(p.offsetHeight,10) - parseInt(p.getElementsByClassName('content_top')[0].offsetHeight,10)) + 'px'; 
}​​​​​​​​​​ 

JS Fiddle demo.

Answer 2

Einfache jQuery Lösung:

$("content_bottom").css({"height": $("main_content").height() + $("content_top").height());