18073 sujets

Questions générales et questions de débutants

Sujet récurrent : hauteur de Div

bonjour,

Oui, je sais, il faut regarder dans les tutos et autres aides....le problème est que ùalgré ça je n'y trouve pas ma solution.
je m'entraine avec un tuto du site que j'ai un epu modifié pour subvenir à mes besoins, et dans une page, j'ai un bloc Div que je veux étirer sur toute la heuteur de la page mais capout!

voici le css concerné, merci d'avance à ceux qui m'aideront


html, body {
	margin: 10px 0;	
	padding: 0;
	font: 0.9em "Trebuchet MS", helvetica, sans-serif;
	background: #dea;			
}

div#page {
  position: absolute;
  width: 800px;
	height: 100%;
	margin: 0 auto;
  background-color:#FFFFFF;
	border: 2px solid #ab4;
}
salut Smiley smile

je pense que ce que tu cherches c'est que ton élément fasse 100% de la hauteur quelque soit le contenu.

c'est donc une question de mise en page générale.

donc > FAQ Smiley cligne

++
Salut et merci de ta réponse,

j'ai bien vu la page : http://forum.alsacreations.com/faq/#item17, mais cela indique comment étirer un bloc selon le contenu d'un autre.

Ce que je cherche c'est comment étirer un bloc même si le contenu (du bloc lui même ou d'un autre) est vide ?
Bien sur, je voudrais que cela reste valable sous toutes les résolutions.

enfin, dans la mesure du possible... Smiley ravi
tu as une idée?
de mon coté je continue à me triturer l'esprit...
Bon je me suis mal fait comprendre alors Smiley biggrin

FAQ > Rubrique : Mise en page générale > Item : Comment faire une page ou un élément qui prend toute la hauteur peu importe le contenu ?

++
OUI! Smiley lol
j'avais seulement indiqué une hauteur de 100% qu'à la Div concerné et non à tout la page.
merci clb56

on me reverra souvent par ici je crois..... Smiley ravi
Administrateur
miltonis a écrit :
OUI! Smiley lol

Bravo Smiley smile
N'oublie pas de marquer ce sujet comme [Résolu] pour faciliter les recherches futures Smiley cligne
Bonjour,

Je m'excuse de reprendre ce post, mais je ne comprends vraiment rien à rien.
J'ai pourtant indiqué 100% de hauteur à mon body, mais la hauteur de mes colonnes ne s'ajustent pas en fonction de celle qui a la plus grande taille...

Je n'y arrive pas Smiley decu
Je vous montre grossièrement ce que je voudrais faire, un truc pourtant si simple mais qui est un casse-tête insolvable à mes yeux.

dans ma page, j'ai une bannière, avec dessous alignées 3 colonnes de largeur différentes, et dont le contenu diffère, mais j'ai beau mettre height: 100%, ou height: auto, les hauteurs de colonnes s'ajustent en fonction de leur contenu et non à la hauteur de la plus grande.

body{
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
}

#container{         /* content : banniere + colonnes 1,2,3 */
      position: absolute;
      width: 800px;
      height: 100%;
      left: 50%;
      margin-left: -400px;
      margin-top: 0;
      padding: 0;
}

#banniere{
      position: absolute;
      width: 800px;
      height: 120px;
      margin-top: 0;
      padding: 0;
      background-color: gold;
}



.colonne1{        /* colonne possédant le moins de contenu */
      position: absolute;
      margin-top: 120px;
      margin-left: 0;
      padding: 0;
      width: 50px;
      height: auto;
      background-color: navy;
}

.colonne2{
      position: absolute;
      margin-top: 120px;
      margin-left: 50px;
      padding: 0;
      width: 200px;
      height: auto;
      background-color: blue;
}

.colonne3{          /* colonne possédant le plus de contenu */
      position: absolute;
      margin-top: 120px;
      margin-left: 250px;
      padding: 0;
      width: 550px;
      height: auto;
      background-color: lightblue;
}


Quelqu'un aurait-il la bonté de m'expliquer ce qui ne va pas, le body est bien à 100% de hauteur, je sèche complètement....
Peut-être un rapport avec le fait que la hauteur de la colonne la plus grande fait plus que la taille de l'écran, donc du body ?
Sujet clos
Aller à