Comment faire en sorte que la hauteur d'un div soit égale à la hauteur de la fenêtre du navigateur ?

Si vous êtes en mesure de positionner absolument vos éléments,

position: absolute;
top: 0;
bottom: 0;

le ferait.

Tu ne mentionnes pas quelques détails importants comme.. :

• La mise en page est-elle de largeur fixe ?
• L'une ou l'autre des colonnes, ou les deux, sont-elles de largeur fixe ?

Voici une possibilité :

body,
div {
  margin: 0;
  border: 0 none;
  padding: 0;
}

html,
body,
#wrapper,
#left,
#right {
  height: 100%;
  min-height: 100%;
}

#wrapper {
  margin: 0 auto;
  overflow: hidden;
  width: 960px; // width optional
}

#left {
  background: yellow;
  float: left;
  width: 360px; // width optional but recommended 
}

#right {
  background: grey;
  margin-left: 360px; // must agree with previous width 
}

  Example



  <div id="wrapper">
    <div id="left">
      Left
    </div>

    <div id="right"></div>
  </div>

Il existe de nombreuses variations sur ce point, selon les colonnes qui doivent être fixes et celles qui sont liquides. Vous pouvez également le faire avec un positionnement absolu, mais j'ai généralement trouvé de meilleurs résultats (notamment en termes de cross-browser) en utilisant des flotteurs à la place.

Ajoutez min-height : 100% et ne spécifiez pas de hauteur (ou mettez-la en automatique). Cela a fait l'affaire pour moi :

.container{     
    margin: auto;
    background-color: #909090;
    width: 60%;
    padding: none;
    min-height: 100%;
}