Comment faire ce layout avec des div et des height en %

Bonjour,
Je cherche comment faire ce layout. C'est le 25% de hauteur de chacun des 4 divs qui me pose problème car je ne sais pas comment les faire apparaître un en dessous de l'autre. Notez que mon body serait comme suit pour n'avoir aucun scroll et aucune bordure:

body {
	margin:0 0 0 0;
	overflow:hidden;
	height:100%;
	width:100%;
}

Merci
Modifié par luciendub (30 Nov 2011 - 04:13)

Bonjour et bienvenue,

sur le web on scrolle, c'est fait et prévu pour ça, sans supplément de prix, sans difficulté supplémentaire (au contraire) : c'est un media non paginé. On doit pouvoir zoomer le texte (sans forcément faire de même avec les images, le zoom ancienne manière) si on est malvoyant (le référentiel d'accessibilité WCAG 2.0 dit jusqu'à 200% soit 6 fois Ctrl et + sur Firefox mais c'est arbitraire), désactiver les CSS et arriver à lire le tout, etc

À part ça pour avoir 4 blocs de même hauteur, le plus simple est d'utiliser display: table; et display: table-cell; (voir atelier Paris-web de Raphaël Goetter : http://www.slideshare.net/goetter/vive-les-tableaux-de-mise-en-page )

Moi j'aime bien le "no scroll" aussi, mais il faut que ce soit graphique, parce qu'en général et de fait il n y'a pas tant de contenus sur ce genre de sites.

j'utilise les sites avec scrolling mais celui-ci j'avais un concept.
mais merci de vos réponses

Hello,

De tête tu dois pouvoir faire:

html {
  height: 100%;
}
body {
  position: relative;
  height: 100%;
  margin: 0;
  padding: 0;
}
#left {
  position: absolute;
  top: 0; left: 0;
  width: 200px;
  min-height: 100%;
}
.tile {
  width: auto; /* par défaut */
  min-height: 25%;
  margin: 0 0 0 200px;
}

Et je laisserais un scroll s'installer si nécessaire. C'est-à-dire que dans les cas que tu auras prévus et testés tu n'auras pas de scroll, et dans ceux que tu n'auras pas prévus (affichage sur petit écran type tablette et smartphone, hmm?) et où le contenu dépassera la hauteur du viewport eh bien tu auras un scroll qui rend le contenu accessible.

Super! C'est exactement ce que je cherchais!
Merci!