28172 sujets

CSS et mise en forme, CSS3

Hauteur automatique d'une div

bonjour à tous.
Je sais que le probleme est récurent, j'ai lu beaucoup de topic qui tourne autour du sujet, mais je n'ai pas trouvé THE solution à mon souci Smiley decu

je suis en train de monter mon site-portfolio
adresse provisoire : www.chdup.fr/portfolio

sur ce site, j'aimerai que la partie en gris clair s'etende automatiquement jusqu'en bas de la page, quelle que soit la resolution de l'utilisateur.

voici mon code actuel :

<div id="conteneur">
        <div id="fonce">
                <div class="titre">
                    	<div class="pousse_titre">
                        </div>
                        <div id ="txt_titre" class="titre_accueil">
                        </div>
                 </div>
       </div>
       <div id="clair">
       </div>
</div>


#conteneur {
	width:1004px;
	margin:auto;
	height:auto;
	height:100%;
	min-height:100%;
}

#clair {
	width:704px;
/*	height:368px;*/
	height:auto;
	height:100%;
	min-height:100%;
	overflow:hidden;
	background-color:#e5e5e5;
	float:left;
	padding:300px 100px 100px 100px;
	font-family:Arial, Helvetica, sans-serif;
	color:#535353;
	-moz-box-shadow: 4px 4px 12px #1b1b1b;
	-webkit-box-shadow: 4px 4px 12px #1b1b1b;
}


en gros, la div "clair" est contenue dans la div "conteneur", et il faudrait que tout les 2 s'adaptent à la hauteur d'affichage de l'utilisateur, et non au contenu de "clair"

j'essaie en vain les height : auto, 100%, min-height et overflow:hidden, mais rien n'y fait.

existe-t-il vraiment une solution ?

merci d'avance
Les conditions à réunir pour avoir un div d'une hauteur de 100% de l'écran:

body,html{height:100%;}
#ledivdontonveutreglerlahauteur{min-height:100%;}


Et c'est tout Smiley smile

Faudra rajouter pour IE6:

* html #ledivdontonveutreglerlahauteur{
height:100%
}
merci beaucoup.
Il va falloir que je me documente sur ce "html" je ne sais pas à quoi il correspond.

à l'ajout de cette ligne, ma partie en gris clair s'est allongée, mais trop ...
elle depasse maintenant de l'ecran en hauteur.
c'est à priori à cause des paddings que je lui applique, mais on ne peux plus appliquer de padding fixes sur une div qui a une min-height:100% ?
En même temps, les paddings font juste leur boulot.

Selon le box model, t'as la hauteur et la largeur auxquelles s'ajoutent le margin+border+padding.
ChDUP a écrit :
Il va falloir que je me documente sur ce "html" je ne sais pas à quoi il correspond.

Un indice:
<html lang="fr">...</html>


ChDUP a écrit :
c'est à priori à cause des paddings que je lui applique

Ça plus le box-shadow. (C'est le cas aussi pour ton header, en passant.)
Tu pourrais éventuellement éviter que le padding se rajoute à la hauteur déclarée en utilisant la propriété box-sizing (CSS3), mais ça ne résoudrait pas le problème du box-shadow. Ni le problème lié à tes contenus positionnés en absolu...

ChDUP a écrit :
on ne peux plus appliquer de padding fixes sur une div qui a une min-height:100% ?

Bah si, tu appliques ton padding, et justement... il s'applique. Smiley smile
ouioui, je ne reproche rien aux paddings, le probleme c'est le min-height :100% du coup il prend une valeur de 100% + padding-top + padding-bottom

je ne vois pas comment lui faire prendre une height de 100% -300px (mon padding-top) - 100px (mon padding-bottom) ?

en supprimant les paddings pour les remplacer par des margin sur le contenu, le probleme c'est que lors de la remontée de texte aux changements de page, ça remonte jusque tout en haut, normal. et ça je ne le veux pas (voir le probleme sur le site actuellement www.chdup.fr/portfolio )
ChDUP a écrit :
je ne vois pas comment lui faire prendre une height de 100% -300px (mon padding-top) - 100px (mon padding-bottom) ?

box-sizing en CSS3. Compatible IE8, Firefox, Webkit, Opera.
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari, Chrome */
box-sizing: border-box; /* IE8, Opera */

Pas de solution à ma connaissance pour IE7. Pour IE7 et éventuellement IE6, je conseillerais de laisser tomber le min-height.

Bon, sinon il y aussi la solution de doubler #clair par un DIV l'intérieur, et d'attribuer le padding à ce DIV. Old school, mais ça marche.

Reste le problème du box-shadow. Tu peux éventuellement tricher avec un margin-top négatif (-16px, pour info). Et pour le box-shadow du header qui te pose aussi problème, tu peux soit attribuer la couleur de fond et le box-shadow à un conteneur à l'intérieur de #header (DIV à rajouter) et attribuer un overflow:hidden à #header, soit... euh j'ai pas d'autre solution intéressante en tête mais ça doit se trouver.
merci Florent pour toutes ces pistes.
nos 2 posts precedents s'etaient croisés.

bon alors, concernant le box-sizing :
il semble qu'il devrait s'appliquer à la width ET à la height.
dans mon cas, j'ai du rallonger la width de la taille de mon padding, normal, mais la height est toujours trop longue par rapport à ma page Smiley decu .
je ne comprend pas pourquoi. Je vais surement devoir passer par ta 2eme solution, que je n'ai pas encore essayée.

pour le box-shadow sur le header, j'ai essayé ta solution sans succes. L'ombrage sur la div interieure rallonge toujours la width et me cree un scroll horizontal. Cela est peut etre du à la position absolute de mon header ? le overflow:hidden ne doit pas marcher dans ce cas
Après quelques recherches: apparemment les versions actuelles de Firefox ont des lacunes que n'ont pas les toutes dernières versions de Webkit. Notamment:
- -moz-box-sizing: border-box n'est pas pris en compte lorsque utilisé avec min-height. Ça marche avec height, mais pas min-height.
- Les ombres qui dépassent et génèrent des scrollbars, apparemment c'est un bug d'implémentation (ou quelque chose de pas spécifié) corrigé dans Webkit. Il me semble avoir vu le problème dans Safari 4 il y a quelques mois, mais il ne se produit pas dans Safari 5.

Pour être compatible avec Firefox, tu ne peux donc pas utiliser -moz-box-sizing ici, et il faudra utiliser un DIV interne pour le padding.

Pour le box-shadow qui provoque une scrollbar, ça reste problématique dans Firefox. Je crois que la meilleure solution ici, qui vu ton design est en plus simple à appliquer, c'est de faire tes ombres avec des images de fond en PNG-32 plutôt qu'avec box-shadow.
merci encore de ton aide.
j'ai réglé le souci des shadows avec des background-images transparentes (au moins elles sont visibles sur tous navigateurs ainsi !).
et pour le padding sur mon min-height:100% j'ai utilisé une div interne.

Il me reste beaucoup d'autres soucis, notamment en JavaScript, je crois qu'il faudrait que j'embauche quelqu'un pour venir à boit de ce portfolio !

www.chdup.fr/portfolio
arg ...

bon alors le min-height:100% s'adapte bien à la hauteur de la resolution de l'écran.
le probleme maintenant c'est qu'il est fixe à cette hauteur.
sur ma page "realisations, print", on voit que la hauteur ne s'adapte malheureusement pas au contenu.
malgré une div interne à #clair surlaquelle sont apposés des paddings, dont un bottom

#padding_clair {
	padding:300px 100px 100px 100px;
}

Modifié par ChDUP (21 Jun 2010 - 11:54)
Sujet clos
Aller à