Cómo arreglar el 100% de altura que se calcula como 0 PX con datos dinámicos

Question

Tengo una página que comencé a construir con el archivo CSS de Twitter Bootstrap. Quiero que mi .container-fluid.sidebar y .container_fluid.content sea el 100% de la ventana y tienen barras de desplazamiento independientes automáticas. Cuando configuré la barra lateral y el contenido en lo siguiente

.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%;}

Las alturas se calculan como 0px. Tengo datos dinámicos que están llenando estos elementos, por lo que simplemente comienzan como

<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>

He confirmado que todos los datos dinámicos se están llenando correctamente estableciendo las alturas manualmente en 600 PX.

Answer 1

Logré resolver esto eliminando una etiqueta adicional en la que había encapsulado la mayor parte de la página sin ninguna buena razón. Está funcionando ahora con solo CSS.

Answer 2

La única forma en que sé cómo hacer esto es a través de JavaScript y "DHTML". Lo siguiente debe hacer el truco por usted y también cambiará el tamaño si el usuario cambia de tamaño de la ventana. Una cosa que puede ser problemática es lo que sucede cuando se agrega una barra de desplazamiento horizontal que cambia la cantidad de área de cliente vertical disponible.

La rutina GetClientHeight debe ser segura y todos los navegadores modernos admiten GetElementByid.

función getClientHeight () {

var windowHeight = window.innerHeight ? window.innerHeight :

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

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

return windowHeight;

} // función getClientHeight

// Esta rutina establecerá la "altura" de los divs "Mainindow" y "Naviagtion"

  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

función loadevent (e) {

sizeDivs();

} // Función Loadvent

// Este es el controlador de "cambiar de tamaño" de la ventana: cuando cambia el tamaño de la ventana, queremos cambiar el tamaño de nuestros DIVs

var resizetimer;

function handleLerize () {

  clearTimeout(resizeTimer); 

  resizeTimer = setTimeout(sizeDivs, 200); 

} // Handleresizar

// Ahora es el momento de establecer la carga de la página y cambiar el tamaño de los controladores

Window.Onload = Loadvent;

window.onresize = handleresize;