So reparieren Sie 100% Höhe als 0 PX mit dynamischen Daten

Question

Ich habe eine Seite, die ich mit der Twitter -Bootstrap -CSS -Datei erstellt habe. Ich möchte, dass mein .container-fluid.sideBar und .container_fluid.content 100% des Fensters sein und automatisch unabhängige Scroll-Balken haben. Wenn ich die Seitenleiste und den Inhalt auf Folgendes setze

.container-fluid>.sidebar{position:absolute;top:42px;left:20px;width:240px; overflow-y:auto;overflow-x:visible;min-height: 94%;}
.container-fluid>.content{top:42px;margin-left:240px;overflow-y:auto;overflow-x:visible;min-height: 94%;height:94%;}

Die Höhen werden als 0PX berechnet. Ich habe dynamische Daten, die diese Elemente füllen, damit sie einfach als als starten

<div class="container-fluid" id="main">
    <div id="navigation" class="sidebar">
        <ul class="treeview"/>
    </div>

    <div id = "mainwindow" class="content">
        <div id="update_panel"/>
    </div>
</div>

Ich habe bestätigt, dass alle dynamischen Daten korrekt ausgefüllt werden, indem die Höhen manuell auf 600 px eingestellt werden.

Answer 1

Ich habe es geschafft, dies herauszufinden, indem ich ein zusätzliches Tag entfernt habe, das ich ohne guten Grund den größten Teil der Seite eingekapselt hatte. Es funktioniert jetzt nur mit CSS.

Answer 2

Ich weiß nur, wie ich dies tun kann, über JavaScript und "DHTML". Das Folgende sollte den Trick für Sie ausführen und wird auch die Größe sein, wenn der Benutzer das Fenster verändert. Eine Sache, die problematisch sein kann, ist das, was passiert, wenn eine horizontale Scrollbar hinzugefügt wird, die die Menge des verfügbaren vertikalen Kundenbereichs ändert.

Die GetClientHeight-Routine sollte safer und alle modernen Browser unterstützen GetElementById.

Funktion getClientHeight () {

var windowHeight = window.innerHeight ? window.innerHeight :

                          (document.documentElement && document.documentElement.clientHeight ?

                          document.documentElement.clientHeight : document.body.clientHeight);

return windowHeight;

} // Funktion getClientHeight

// Diese Routine setzt die "Höhe" der Divs "Mainindow" und "Naviagion"

  function sizeDivs() {

    var cH = getClientHeight();

        var eMW = document.getElementById('mainwindow');

    eMW.style.height = cH + 'px';

    var enav = document.getElementById('navigation');

    enav.style.height = cH + 'px';

  } // function sizeDivs

Funktion Loadevent (e) {

sizeDivs();

} // Funktion Loadevent

// Dies ist das Fenster "Größen Sie die Größe" Handler - Wenn sich die Fenstergröße ändert, möchten wir unsere Divs ändern

var resizetimer;

function handleresize () {

  clearTimeout(resizeTimer); 

  resizeTimer = setTimeout(sizeDivs, 200); 

} // Handleresize

// ist nun die Zeit, um die Seitenladelast zu setzen und die Größe der Größe zu ändern

window.onload = loadevent;

window.onResize = Handleresize;