28173 sujets

CSS et mise en forme, CSS3

Div avec hauteur auto

Bonjour,

J'aimerais savoir s'il est possible d'avoir un div avec une hauteur identique a celle du navigateur.

Je sais qu'avec une largeur auto c'est possible, mais est ce possible avec la hauteur ?
spyderco a écrit :
J'aimerais savoir s'il est possible d'avoir un div avec une hauteur identique a celle du navigateur.

C'est à peu près possible mais peu évident à mettre en place pour un débutant en CSS.

C'est dans quel but ?
Florent V. a écrit :

C'est à peu près possible mais peu évident à mettre en place pour un débutant en CSS.

html, body {height:100%}
div#... {height:100%}

Pas si compliqué... mais sans doute l'as tu interprété différement?
Hermann a écrit :
Pas si compliqué...

Bien sûr, si on se contente d'un truc mal foutu et fichtrement problématique... Smiley rolleyes

Je ne sais pas si c'est une interprétation de ma part, mais je préconiserais plutôt une hauteur minimale (avec propriété CSS min-height, correctif pour IE6 via commentaire conditionnel, etc.).

Et dans tous les cas il faudra surveiller les questions de fusion des marges pour éviter des barres de défilement inutiles et des espaces vides inexpliqués.

Bref, pas si évident que ça. Smiley cligne
Hermann a écrit :
Mais dans quel cas et dans quel browser le height peut être problématique?

Dans le cas où le contenu du bloc en height: 100% dépasse ou peut dépasser la hauteur du viewport (zone d'affichage du navigateur), par exemple.

J'aurais peut-être dû demander des précisions à l'auteur du sujet, mais il me semble qu'il veut réaliser un design avec un site qui prend toute la hauteur disponible quel que soit l'importance de son contenu. La propriété height n'est pas adaptée à ce cas de figure, à moins de n'avoir que des contenus très succincts sur chaque page (genre qui ne dépassent pas les 400px de hauteur même lorsque le texte est zoomé à 200%... Smiley biggol ).
<Note de modération>

Ce sujet ayant très largement dévié vers des considérations sans rapport avec la question initiale et des échanges quelque peu tendus, les messages parasites ont été supprimés pour lui redonner une lisibilité correcte.

Il ne s'agit en aucun cas d'une censure mais simplement d'une mise en ordre pour une meilleure lisibilité des interventions. Les questions relatives au fonctionnement de ce forum et de cette communauté, les remarques diverses et retours d'expérience peuvent être faits en ouvrant un nouveau sujet dans le Bar du forum.

Merci de votre compréhension. Smiley cligne

</Note de modération>
Modifié par Florent V. (21 Mar 2007 - 17:50)
Bon, allez, je m'y colle!
Voila quelque chose qui fonctionne avec IE6 et FIREFOX.
IE ne comprend pas min-height, mais interprête height comme min-height.
Le code html utile (attention à la syntaxe et il y a un problème d'affichage avec les crochets qui encadrent endif)
:<link title="feuille de style" media="screen" rel="stylesheet" href="blanche.css" type="text/css" />
  <!--[if  lte IE 6]>
	<link title="feuille de style" media="screen" rel="stylesheet" href="blancheIE.css" type="text/css" />
   <![endif]-->
</head>
<body>
<div id="page">
<!-- le contenu -->
</div> <!-- fin page -->
<div id="pied">C'est le pied</div>
</body>
</html>


La feuille de style pour FIREFOX ...

html {height:100%;font-size:100%;}
body{height:100%;margin:0;padding:0;background:#00F;}
#page{width:700px;background:#AFA; border:1px solid red; min-height:95%}
#pied{width:702px;height:5%; background:#F00;text-align:center;}


La feuille de style pour IE
#page{position:relative;width:700px;background:#AFA; border:1px solid red; height:95%;}


J'ai même ajouté un pied de page. Attention au modèle de boite avec IE5x.
Et pour citer un de nos plus grand penseurs:
"Pourquoi faire simple quand on peut faire compliqué"
Modifié par jhr (22 Mar 2007 - 15:50)
Sujet clos
Aller à