28172 sujets

CSS et mise en forme, CSS3

CSS - Hauteur div

Salut à tous !

J'ai une question à vous poser sur la hauteur des div en CSS.
J'ai une div "wrapper" qui englobe toutes les autres div : hauteur : 100% et largeur:960px
Dedans j'ai défini :
- une div header (logo + menu)
- une div content (contenu de la page)
- une div footer.

Mon problème est le suivant : Je souhaiterai que ma div content occupe toute la place entre mon header et mon footer sans que je n'ai besoin de mettre de texte dedans. Je vous demande cela car mon content à une couleur bien définie et également un border-radius.

Au départ j'avais mis ma couleur dans le wrapper mais pour le border-radius ça ne marchait toujours pas...

Merci d'avance à ceux qui pourrait m'éclarer dans ce problème !

PS : Je met le code CSS Smiley smile 


* {
 margin: 0;
  padding: 0;
}

html {
	height: 100%;
}

body {
	height: 100%;	
	font-family:Arial, Helvetica, sans-serif;
	color: #FFF;
	font-size:13px;
	line-height:130%;
	
	/**********Mise en place du dégradé**********/
	background: #262d38; /* Old browsers */
	background: -moz-linear-gradient(top, #262d38 0%, #000000 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#262d38), color-stop(100%,#000000)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #262d38 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #262d38 0%,#000000 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #262d38 0%,#000000 100%); /* IE10+ */
	background: linear-gradient(top, #262d38 0%,#000000 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262d38', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

#wrapper {
	width:960px;
	min-height:100%;
	margin:0 auto;
}

#header {
	width:960px;
	height:125px;
	background: #000000;
}

#logo {

}

#menu {

}

#content {
	width:960px;
	background: #a5a5a5;
	min-height: ?????
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	
}

#footer {
	position:absolute;
	bottom:0;
	height:50px;
	width:960px;
	background: #FFFFFF;
}

Modifié par alexasm15 (22 Dec 2011 - 17:43)
Bonjour,

tu aurais bien cette solution pour firefox :
height: -moz-calc(100% - 175px);
, mais ce n’est pas portable.
Merci pour ta réponse j'avais essayer de "calculer" la hauteur minimale sans succès ^^
Le problème c'est que je voudrais un code compatible avec tous les navigateurs mais je te remercie tout de même !
Merci pour ta réponse Raphael.

Cependant le table-row permet seulement de placer mon footer non ? En le mettant en position absolute et bottom 0 on doit pouvoir obtenir le même résultat...

Mais imaginons que je mette une couleur a mon content, celle-ci ne va prendre que la taille nécessaire au texte qu'il y a dedans. Et ce que je voudrais c'est que d'origine ma div prenne toute la place nécessaire...

Je n'ai pas encore tester ta solution utilisant les tableaux mais il me semble avoir entendu qu'utiliser des tableaux pour la mise en page n'était pas terrible terrible ^^
Modérateur
Salut,

Peut etre un peu plus tordu mais sait-on jamais.
Ton conteneur avec :
height:auto;
min-height:100%;

ca permet qu'il soit au minimum de la taille de ta fenetre, voir plus long si le texte dépasse.
Tu places ensuite ton header (top:0px;) et ton footer (botom:0px;) avec des hauteurs FIXES et tu donnes a ton contenu une hauteur de 100% avec un padding-top correspondant à la hauteur du header et un padding-bottom correspondant a la hauteur du footer.

Je laisse quand même le soin a Raphael de valider cette technique... ^^'
Je viens de tester mais sans succès...
Je met des screenshots pour vous montrer un peu plus clairement mon problème...
Mon problème :
upload/42493-pb.jpg

Ce que je voudrais avoir (sans avoir à fixer la taille du content à 600px) :
upload/42493-pb2.jpg
Modérateur
Juste une petite question, Ton header et ton footer tu les places directement dans le body ou tu as un conteneur ?

<body>
      <div id="header"></div>
      <div id="corps"></div>
      <div id="footer"></div>
</body>


ou

<body>
   <div id="conteneur">
      <div id="header"></div>
      <div id="corps"></div>
      <div id="footer"></div>
   </div>
</body>


?
Modifié par _laurent (23 Dec 2011 - 13:22)
La deuxième possibilité !

J'ai mon conteneur "wrapper" qui contient tous les autres : "header", "content" et "footer"
Modérateur
ok, pour etre sur d'avoir été clair quand je disais :

_laurent a écrit :
Peut etre un peu plus tordu mais sait-on jamais.
Ton conteneur avec :
height:auto;
min-height:100%;

ca permet qu'il soit au minimum de la taille de ta fenetre, voir plus long si le texte dépasse.


je parlais du wrapper.
Et ton "content" c'est ce que j'ai appelé "contenu" ici :

a écrit :
et tu donnes a ton contenu une hauteur de 100% avec un padding-top correspondant à la hauteur du header et un padding-bottom correspondant a la hauteur du footer.

Modifié par _laurent (23 Dec 2011 - 13:55)
J'avais bien compris =)
Pour être sûr de ne pas avoir fait de bêtises je re-testerai ça toute à l'heure !
_laurent a écrit :
Salut,
ca permet qu'il soit au minimum de la taille de ta fenetre, voir plus long si le texte dépasse.
Tu places ensuite ton header (top:0px;) et ton footer (botom:0px;) avec des hauteurs FIXES et tu donnes a ton contenu une hauteur de 100% avec un padding-top correspondant à la hauteur du header et un padding-bottom correspondant a la hauteur du footer.


Désolé d'avoir été aussi long (repas de famille Smiley smile ).
Donc j'ai bien vérifié mais malheureusement ça ne fonctionne pas. Il ne faut pas un padding car après mon header prend la couleur du content et avec un margin tout de décale vers le bas, y compris le header.
De plus quand je met la hauteur du content à 100% rien ne se passe...

Je vous met l'URL de mon site pour que vous voyez le problème :
http://alexis-souquiere.free-h.fr/index.html
Sujet clos
Aller à