Largeur relative à une mise en page CSS, fixe et mélange fluide

Question

Je suis en train de faire une mise en page de chatroom comme ce qui suit:

Maintenant, mon problème est que je ne suis pas sûr d'avoir la boîte de conteneur occuper toute la largeur et la hauteur (avec doctype valide) et ensuite faire croître le centre div si la fenêtre se développe en gardant le reste constant.

Je connais bien js/css. donc j'ai juste besoin d'un début de ligne directrice. Je voudrais éviter javascript pour traiter et ensuite définir les hauteurs et les largeurs.

Answer 1

body, html { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
#container { 
    height: 100%; 
    height: auto !important; 
    margin: 0 auto; 
    min-height: 100%; 
    position: relative; 
    width: 100%; 
} 
.header { 
    display: block; 
    height: 100px; 
    width: 100%; 
} 
.body-left { 
    float: left; 
    width: 70%; 
} 
.body-right { 
    float: right; 
    width: 30%; 
} 
.clear { 
    clear: both; 
} 
.footer { 
    float: left; 
    width: 70%; 
} 

et HTML

<div id="container"> 
    <div class="header"></div> 
    <div class="body-left"></div> 
    <div class="body-right"></div> 
    <div class="clear"></div> 
    <div class="footer"></div> 
</div> 

C'est si c'est ce que vous cherchez

ou utilisez le code JavaScript suivant pour connaître la hauteur et l'affecter à votre conteneur:

function getWindowHeight() { 
    var windowHeight = 0; 

    if (typeof(window.innerHeight) == 'number') { 
     windowHeight = window.innerHeight; 
    } else { 
     if (document.documentElement && document.documentElement.clientHeight) { 
      windowHeight = document.documentElement.clientHeight; 
     } else { 
      if (document.body && document.body.clientHeight) { 
       windowHeight = document.body.clientHeight; 
      } 
     } 
    } 

    return windowHeight; 
} 

window.onload = init; 

function init() { 
    document.getElementByID("container").style.height = getWindowHeight() + "px"; 
}