28172 sujets

CSS et mise en forme, CSS3

[resolu] Avec hauteur minimale de 100% de la fenêtre du navigateur

Bonjour,

J'ai un petit souci que je n'arrive pas à résoudre... pourtant cela ne devrait pas être très compliqué.

Mon but est d'avoir une div globale avec une hauteur de 100%.
Voici la structure du html :


<body>
  <div class="container-16 global">
    <div class="grid-16 header">
      header
    </div>
    <div class="grid-16 main">
      content
    </div>
    <div class="grid-16 footer">
      footer
    </div>
  </div>
</body>


Voici mon css. A noter que j'utilise le système 960 grid system :

html, body{
    margin: 0;
    padding: 0;
		background-color:#333;
    font-size: 100%;
    height:100%;
}
.global{
	background-color:#fff;
	height:100%;
}
.container-16 {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
}
.grid-16 {
  display: inline;
  float: left;
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
}
.container-16 .grid-16 {
  width: 940px;
}
.header{
  background-color:#fff;
}
.footer{
  background-color:#fff;
}


Pour l'instant (et bizarrement), la div .global ne va pas jusqu'en bas de mon footer ! Qqn a une idée svp ?
Modifié par nforum (03 May 2010 - 17:10)
Je me réponds à moi-même, car avec un peu de recul, j'ai trouvé la réponse.

dans ma div .global j'ai ajouté la propriété overflow comme suit :

.global{
	background-color:#fff;
height:100%;
overflow:hidden;
}


du coup, ça fonctionne !
Sujet clos
Aller à