Come risolvere il 100% altezza sia calcolata 0 px con i dati dinamici

Question

Ho una pagina che ho iniziato a costruire con il file css Twitter Bootstrap. Voglio che il mio .container-fluid.sidebar e .container_fluid.content di essere al 100% della finestra e hanno barre di scorrimento automatiche indipendenti. Quando ho impostato la barra laterale e contenuti al seguente

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

I Heights calcolato come 0px. Ho dati dinamici che sta riempiendo questi elementi in modo che appena cominciano come

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

I hanno confermato che tutti i dati dinamica è popolato correttamente modificando le altezze manualmente 600 px.

Answer 1

Sono riuscito a capirlo rimuovendo un tag in più che avevo incapsulato maggior parte della pagina in per nessuna buona ragione. Si sta lavorando ora con solo css.

Answer 2

L'unico modo che conosco come fare questo è tramite JavaScript e "DHTML". Il seguente dovrebbe fare il trucco per voi e sarà anche ridimensionare se l'utente ridimensiona la finestra. Una cosa che può essere problematico è quello che succede quando viene aggiunto una barra di scorrimento orizzontale che cambia la quantità di area client verticale disponibile.

La routine getClientHeight dovrebbe essere sicuro cross-browser e tutti i browser moderni supportano getElementById.

funzione getClientHeight () {

var windowHeight = window.innerHeight ? window.innerHeight :

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

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

return windowHeight;

} // funzione getClientHeight

// questa routine imposterà il "altezza" della "mainindow" e "DIVS 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

funzione loadEvent (e) {

sizeDivs();

} // funzione loadEvent

// questa è la finestra "ridimensionamento" del gestore - quando la dimensione della finestra cambia vogliamo ridimensionare le nostre DIV

var resizeTimer;

funzione handleResize () {

  clearTimeout(resizeTimer); 

  resizeTimer = setTimeout(sizeDivs, 200); 

} // handleResize

// ora è il momento di impostare il caricamento della pagina e ridimensionare i gestori

window.onload = loadEvent;

window.onresize = handleResize;