Wie kann ich dynamisch ändern, die Höhe eines div-passen Sie die Größe des div, das es

Bekam ich div1 und div2 mit div2 mit div1 (und einige andere Elemente). Ich möchte dynamisch ändern Sie die Höhe der div1 zu entsprechen, die Höhe von div2(- die Höhe der anderen Elemente), wenn div1 übersteigt die Höhe. Der Grund, warum ich nicht einfach eingestellt div1 ist die Höhe, die Siegwette ist, weil div2 Größe ist nicht fixiert, und ich will, dass die horizontale scroll-Leiste von div1 bis auf den Boden kleben von deren Inhalt und nicht an der Unterseite der div2.

Habe ich keinen code zu zeigen, da es nur zwei divs.

Wenn es hilft, div1 enthält eine Tabelle.

Hier ist, was ich so weit gekommen: 

if(document.getElementById("div1").offsetHeight > document.getElementById("div2").offsetHeight) {       
    document.getElementById("div1").style.height = document.getElementById("div1").parentNode.offsetHeight+"px";
    document.getElementById("div1").style.overflowY = "scroll";                             
}

Dies funktioniert für die Einstellung der überlauf aber ich kann nicht ankommen es zu änderungen in der Höhe der div1

Hier ist die funktionierende version: 

document.getElementById("div1").style.height = '';
document.getElementById("div1").style.overflowY = "";   
if(document.getElementById("div1").offsetHeight > document.getElementById("div2").offsetHeight) {   
    var height = document.getElementById("div2").offsetHeight - document.getElementById("other_data").offsetHeight;
    document.getElementById("div1").style.height = parseInt(height)+"px";
    document.getElementById("div1").style.overflowY = "scroll";                             
}

für diejenigen, die vielleicht mit dem gleichen problem.

Können Sie css verwenden min-height Eigenschaft? Es ermöglicht Ihnen, zu tun, was Sie brauchen.
Korrigieren Sie mich, wenn ich falsch Liege, aber ist nicht der Maßstab ändert sich automatisch, wenn Sie nicht setzen jede Größe atts?
Ich weiß nicht, wie es helfen würde. Ich weiß nicht, die Höhe von div2, bevor ich tatsächlich zu laden, und es ändert sich danach. Neben der, mit min-height auf div1 halten Sie die Bildlaufleiste permanent an der Unterseite der div2.
ja, tut es, aber wenn ich nicht irgend etwas einstellen und div1 wird größer als div2, die scroll-Balken auch nach unten verschiebt und ich brauche es nicht weiter gehen, als die Unterseite der div2. Könnte ich den link ein Bild, um zu erklären, wie ich es will, zu Verhalten.

InformationsquelleAutor Bogdan | 2011-11-30

  1. 2

    Etwas wie dies funktionieren würde. Schreiben Sie einen Ereignis-listener zu beobachten, für die Seite, die Größe ändern, wenn Sie dynamisch ändern die Größe der "Eltern" - div-tag, sollten Sie rufen Sie einfach den js-code, um die Größe der untergeordneten div-jedes mal.

    HTML:

    <div id=div1><div id=div2></div></div>

    JS:

    div2 = document.getElementById('div2')
div2.style.height = div2.parentNode.offsetHeight+"px"
    aber wie kann ich zuverlässig prüfen, ob div1 höher als div2? kann ich es durch den Vergleich offsetHeight? wie if(document.getElementById("div1").offsetHeight > document.getElementById("div2").offsetHeight)
    das "wenn" funktioniert in Ordnung, aber ich kann einfach nicht die Größe der div. Es fügt nur die scroll-Leiste (siehe Beispiel), aber ändert nicht die Größe der div.
    okay, ein weiteres update. div2.style.height = div2.parentNode.offsetHeight+"px" funktioniert nicht, aber so etwas wie div2.style.height = '500px' funktioniert. Ich habe keine Ahnung, wie das macht keinen Sinn
    console.alert(div2.parentNode.offsetHeight) und stellen Sie sicher, Sie bekommen eine ganze Zahl. Wenn nicht, versuchen Sie inspizierte das Objekt mit der Konsole und sehen, warum es das nicht gibt einen Wert zurück. Die Konsole auf WebKit-browser (chrome und safari) ist super hilfsbereit.
    Sie können schalten Sie die Bildlaufleisten (wenn Sie möchten), indem Sie das overflow css Eigenschaft auf das Objekt, das Sie nicht wollen, Scrollbalken auf.

    InformationsquelleAutor tkone

Schreibe einen Kommentar