Comment fixer une hauteur de 100% étant calculée 0 px avec des données dynamiques

Question

J'ai une page que j'ai commencé à construire avec le fichier css Twitter Bootstrap. Je veux que mon .container-fluid.sidebar et .container_fluid.content à 100% de la fenêtre et ont des barres de défilement automatique indépendantes. Quand je tournerai la barre latérale et le contenu à ce qui suit

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

Les hauteurs se calcule comme 0px. J'ai des données dynamiques qui remplit ces éléments afin qu'ils commencent juste à côté comme

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

Je confirme que toutes les données de dynamique peuplait correctement en définissant les hauteurs manuellement à 600 px.

Answer 1

J'ai réussi à comprendre cela en supprimant une étiquette supplémentaire que j'avais encapsulé plus de la page en pour aucune bonne raison. Il travaille maintenant avec juste css.

Answer 2

La seule façon que je sais comment faire est via JavaScript et « DHTML ». Ce qui suit devrait faire l'affaire pour vous et également redimensionner si l'utilisateur redimensionne la fenêtre. Une chose qui peut être problématique est ce qui se passe quand une barre de défilement horizontal est ajouté qui change le montant de la zone client verticale disponible.

La routine getClientHeight doit être en sécurité multi-navigateurs et tous les navigateurs modernes prennent en charge getElementById.

getClientHeight fonction () {

var windowHeight = window.innerHeight ? window.innerHeight :

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

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

return windowHeight;

} // fonction getClientHeight

// cette routine définira la "hauteur" de la DIVS "mainindow" et "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

fonction LoadEvent (e) {

sizeDivs();

} // fonction LoadEvent

// ceci est la fenêtre « resize » gestionnaire - lorsque la taille de la fenêtre change, nous voulons redimensionner nos DIVS

var resizeTimer;

handleResize fonction () {

  clearTimeout(resizeTimer); 

  resizeTimer = setTimeout(sizeDivs, 200); 

} // handleResize

// est maintenant le temps de régler la charge de la page et redimensionner les gestionnaires

window.onload = LoadEvent;

window.onresize = handleResize;