28220 sujets

CSS et mise en forme, CSS3

[resolu]Height: 100%, le contenu ne suite pas !

Bonjour tout le monde !

Comme beaucoup d'autres gens, je voudrais faire une page qui prend toujours au moins toute la taille de la fenetre... J'ai lu qvec qttention tous les tutoriels et conseils, et j'ai donc fait ceci :


html {
	height: 100%;
	width: 100%;
}

body {
       height: 100%;
}

#page-container {
	width: 780px;
        min-height: 92%;
        _height: 92%; // pour ie6
        
	position: relative;
	left: 50%;
	margin-left: -390px;
        top: 15px;
	padding-bottom: 10px;

	
	background: #f1eedf url(../images/footer.gif) center bottom no-repeat;
	
	border: solid 1px;
	border-color: #f1eedf;
}

#contents {
    position: relative;
    min-height: 100%;
    background: transparent url(../images/background2.gif) top left repeat-y;
}


code html



<div id="page-container">
     <div id="contents">
        bla bla bla
     </div>
</div>

Or, si le page-container prend bien la hauteur voulue, le #contents ne suit pas !! Il s'arrète à la fin de son propre contenu et ne prend pas en compte la taille en % exprimée... J'ai remarqué que lorsque je fixais la taille en pixel, cela marchait. Mais en %, le min-height est tout simplement ignoré (je parle de firefox). En remplaçant min-height par height, ca marche sur ie6 mais évidemment pas sur firefox...

Si quelqu'un pouvait me dire pourquoi, cela m'aiderait beaucoup... Merci d'avance !
Modifié par yahrou (20 Jun 2007 - 12:58)
yahrou a écrit :
J'ai lu avec attention tous les tutoriels et conseils

Euh... à vue de nez, tu as lu quatre ou cinq tutoriels différents et tu as mélangé les différentes solutions qui y étaient proposées ?

Je te propose une lecture commentée de ton code :
html {
	height: 100%; /* ok */
	width: 100%; /* furieusement inutile */
}

body {
       height: 100%; /* ok */
}

Jusqu'ici, tout va bien, sauf la largeur à 100% qui ne sert strictement à rien : par défaut, un élément de type bloc prendra 100% de la largeur disponible. Quand à l'élément html, il me semble logique qu'il fasse par défaut 100% de la largeur de la fenêtre...

Par contre, il manque quelque chose d'essentiel : mettre les marges et padding de html et de body (surtout de body !) à zéro !
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}


Je continue avec ton code :
#page-container {
	width: 780px; /* Un peu trop large */
        min-height: 92%; /* Pourquoi pas 100% ?????? */
}

Là, ça commence à devenir problématique. Un conteneur ayant une largeur de 780px, il y a de fortes chances que ça ne passe pas sur un écran en 800x600. 760px, c'est plus raisonable. Au pire, on pourra monter jusqu'à 770px, mais pas plus.
Quant au min-height à 92%, je suis perplexe. Pourquoi pas 100%, si on veut que ce bloc prenne toute la hauteur ?

        _height: 92%; // pour ie6

Argh. Déjà, le recours à un hack pour Internet Explorer est à prohiber. Parce que ce hack s'appliquera à IE6, mais également (il me semble) à IE7, qui figera donc la hauteur à 92%. Et là c'est la catastrophe.
Il faudra donc utiliser les commentaires conditionnels pour isoler IE6. La FAQ du forum parle des commentaires conditionnels.

	position: relative;
	left: 50%;
	margin-left: -390px;
        top: 15px;
	padding-bottom: 10px;

Ça y est, c'est la Bérézina. Smiley bawling
Alors là, c'est un mélange sans nom. On utilise la technique du positionnemnt absolu (mais avec un positionnement relatif !) et de la marge négative pour centrer le bloc. Déjà, c'est une très mauvaise idée, et mieux vaut utiliser la techniques des marges automatiques. Mais en plus, on utilise un positionnement relatif. Argh. Non franchement, quel tutoriel propose ce genre de code ?
De plus, avec un bloc ayant une hauteur de 100%, décaler le bloc en hauteur et rajouter du padding c'est assez suicidaire.

En général, on fera plutôt quelque chose comme ça :
div#page-container {
	width: 760px;
	margin: 0 auto;
	min-height: 100%;
}

Et voilà, le tour est joué.

Maintenant, si on souhaite faire un bloc prenant toujours 100% de la hauteur moins des marges en haut et en bas, doté d'une bordure, etc... ben là c'est une autre paire de manche. Je pourrais proposer des choses en ce sens, mais sans confirmation que c'est ce qui est recherché, je préfère ne pas y passer trop de temps.
J'ai déjà lu tout le premier lien, quand à l'adaptation à ie6, je m'en occuperai quand cela marchera sur firefox !

Mon problème, c'est que malgré le body 100% et html 100%, ma div #page-container prend bien les 92% que je lui assigne, mais la div #contents qu'elle contient ne prend pas les 100% de sa div parent !!

J'ai déjà pas mal cherché sur internet et je n'ai pas trouvé la solution à mon problème...

Merci de vous intéresser à mon problème, ca commence à me désespérer...
Et j'oubliais :
 _height: 92%; // pour ie6

Le // pour ie6 n'est pas un commentaire en CSS. Il est possible que la présence de cette chaine de caractères qui ne correspond à rien empêche les navigateurs d'interpréter la propriété CSS donnée à la suite (en l'occurence : position: relative).

Un commentaire en CSS ressemble à ceci (une seule syntaxe possible) :
/* Ceci est un commentaire */

Attention : le commentaire doit absolument être fermé.
yahrou a écrit :
J'ai déjà lu tout le premier lien, quand à l'adaptation à ie6, je m'en occuperai quand cela marchera sur firefox !

Mois je reprendrais tout à zéro pour faire quelque chose de plus propre (et qui risque donc moins de te désespérer Smiley cligne ). Dis-nous ce que tu veux faire exactement (avec un petit schéma, si besoin), et on te donnera les pistes qui vont bien.
Je viens de voir la nouvelle réponse mais ca ne règle toujours pas mon problème ...
Je réponds à ton analyse :

a écrit :
Jusqu'ici, tout va bien, sauf la largeur à 100% qui ne sert strictement à rien : par défaut, un élément de type bloc prendra 100% de la largeur disponible. Quand à l'élément html, il me semble logique qu'il fasse par défaut 100% de la largeur de la fenêtre...


Je te l'accorde, j'avais du mettre ca à un moment quelquonque pour esayer de régler un autre problème et ca ne sert à rien...

a écrit :

Par contre, il manque quelque chose d'essentiel : mettre les marges et padding de html et de body (surtout de body !) à zéro !


En fait, ils y sont, j'ai oublié de les recopier

a écrit :

Là, ça commence à devenir problématique. Un conteneur ayant une largeur de 780px, il y a de fortes chances que ça ne passe pas sur un écran en 800x600. 760px, c'est plus raisonable. Au pire, on pourra monter jusqu'à 770px, mais pas plus.


J'ai testé et ca passe malgré une petite barre horiwontqle qui ne sert à rien car tout s'affiche. Et étant donné que j'ai besoin de place à l'intérieur, ca va aller...


a écrit :

Quant au min-height à 92%, je suis perplexe. Pourquoi pas 100%, si on veut que ce bloc prenne toute la hauteur ?

En fait, j'ai un footer en bas, qd jemets 92%, il a la place de s'afficher sur toute les résolutions (je n'ai pas mis tout mon code ici)

a écrit :

rgh. Déjà, le recours à un hack pour Internet Explorer est à prohiber. Parce que ce hack s'appliquera à IE6, mais également (il me semble) à IE7, qui figera donc la hauteur à 92%. Et là c'est la catastrophe.
Il faudra donc utiliser les commentaires conditionnels pour isoler IE6. La FAQ du forum parle des commentaires conditionnels.

en effet, il est plus propre de faire comme tu dis même si ie7 ne le prend pas en compte, c'était quelquechose de temporaire pour tester mes modifications.

a écrit :

Ça y est, c'est la Bérézina. bawling
Alors là, c'est un mélange sans nom. On utilise la technique du positionnemnt absolu (mais avec un positionnement relatif !) et de la marge négative pour centrer le bloc. Déjà, c'est une très mauvaise idée, et mieux vaut utiliser la techniques des marges automatiques. Mais en plus, on utilise un positionnement relatif. Argh. Non franchement, quel tutoriel propose ce genre de code ?
De plus, avec un bloc ayant une hauteur de 100%, décaler le bloc en hauteur et rajouter du padding c'est assez suicidaire.

J'utilise la méthode du positionnement par les marges négatives que j'ai trouvé sur ce site et qui marche très bien ! Seulement, je remplace le absolute par relatif, car je veux que la hauteur de mon conteneur soit pris en compte pour pouvoir ajouter mon footer en dessous dans le flot normal, ce qui est qd même le plus simple. Je ne vois pas pourquoi le relatif t'afole ici.
En outre, j'ai besoin du padding 10px car j'ai un background qui se place tout en bas et que je n'ai pas envie que le contenu arrive dessus.
C'est une des raisons pour lesquelles j'utilise du 92%, qui marche bien avec toutes les résolutions !
Quand au margin auto, il ne marche pas toujours sous ie...

Pour conclure, non je ne vais pas refaire tout mon site, parce que jusqu'à ce que mon client me demande de faire des pages qui prennent toute la hauteur, je n'avais aucun problème.
je veux juste savoir pourquoi le min-height 100% de la div contents n'est pas pris en compte par firefox.

Si tu voir mon site tel qu'il est sans les histoires de height 100%, c'est ici :
www1.portalin1.com/gresham (pas de liens, car c'est une verison temporaire, je ne voudrais pas qu'il se fasse référencer)
J'ai rajouté le comm 
// pour ie 6


qd j'ai mis le code sur le forum, donc ca n'a pas pu géner quoi que ce soit... Mais merci qd même, je ne sais jamais vraiment quel type de commentaire on doit faire en fonction du langage, css, javascript, html; jsp, php ...
yahrou a écrit :
Quand au margin auto, il ne marche pas toujours sous ie...

Les marges automatiques marchent toujours sous IE6 et IE7, à partir du moment où la page est interprétée en mode strict (et pas en mode Quirks... mais sauf cas très très particulier, qui va utiliser le mode Quirks, à part les suicidaires ?). Pour les versions précédentes d'IE, il y a un correctif très simple à mettre en place et détaillé dans le tutoriel que tu cites.

À côté de ça, la technique des marges négatives me semble peu fiable, et peut poser des problèmes pour les petites résolutions (éléments qui sortent de l'écran sans pour autant faire apparaitre une barre de défilement horizontale, par exemple).

Je te conseille donc très fortement d'utiliser plutôt le centrage via le calcul automatique des marges.


a écrit :
je veux juste savoir pourquoi le min-height 100% de la div contents n'est pas pris en compte par firefox.

Sur le site dont tu donnes de lien, je n'ai pas vu de div#contents dans le code HTML, ni de propriétés s'y appliquant dans la feuille de style.

De plus, div#page-container n'avait pas de hauteur fixe ou de hauteur minimale.

Mais tu as sans doute fait des changements ailleurs ?

Quoi qu'il en soit, il est impossible de donner une hauteur en pourcentage à un élément dont le parent n'a pas de hauteur fixe (en pixels ou pourcentages ou autre unité). Or, une hauteur minimale ne semble pas être considérée comme une hauteur fixe.


Pour réaliser ce que tu veux faire (ou plutôt ce que le client demande), il devrait y avoir des moyens utilisables, mais ils seront difficiles à appliquer comme des rustines sur une mise en page déjà existante.

Quelques pistes malgré tout :
http://web.covertprestige.info/test/16-page-sur-toute-la-hauteur-et-pied-de-page-1.html
http://web.covertprestige.info/test/18-colonnes-factices-fluides-et-entete-piedpage-1.html
La première page contient des explications intéressantes sur les design en « minimum 100% de hauteur », et la deuxième présente un exemple intéressant avec des colonnes factices.

Pour ma part, j'entrevois une solution avec :
- un conteneur global comprenant tous les éléments de la page, y compris l'en-tête et le pied de page, conteneur lui-même doté d'une hauteur minimale de 100% (voir premier lien) ;
- un en-tête dans le flux (pas positionné en absolu, à priori, car il doit pouvoir repousser le reste du contenu) ;
- un pied de page positionné en absolu (cf. là encore le premier lien).
À partir de là, on ne devrait pas avoir besoin de bloc de contenu ayant une hauteur de 92% ou de 90%... Pour avoir, pour l'en-tête et le pied de page, le même fond que sur les bords extérieurs, il suffira de jouer avec les couleurs (ou si besoins les images) de fond de l'en-tête et du pied de page.

Pour la hauteur à 100% du conteneur de div#contents, ça ne me semble pas indispensable. La technique des colonnes factices devrait suffire.

Bref, ça me semble tout à fait faisable, mais ça demande de revoir la structure des bloc conteneurs et une partie non négligeable de la feuille de style.
mpop a écrit :

Parce que ce hack s'appliquera à IE6, mais également (il me semble) à IE7, qui figera donc la hauteur à 92%.


Non IE7 n'implémente plus l'underscore hack ni le star hack d'ailleurs (* html...)
Voir http://centricle.com/ref/css/filters/
Modifié par Hermann (09 Jan 2007 - 18:00)
Merci pour tes conseils, en effet, je vqis pqsser en margin auto, ca m'a l'air plus sur. J'étais réstée sur l"idée que ca ne marchait pas à une époque où je n'avais encore découvert comment faire marcher ie de facon corecte.

Pour le reste, je suis au moins contente d'avoir trouvé pourquoi même si ne je sais toujours pas exactement comment (mon esprit logique ne supporte pas les problèmes sans cause spécifique). J'aurai le temps demain d'explorer toutes les pistes que tu m'as données.

Et sinon, non, comme je te l'ai dit, le site que je t'ai envoyé est la verision sans les hauteurs 100%. Mon client m'a demandé ça ce matin et comme il a acces au lien, je ne mets en ligne que des choses qui marchent... C'était pour que tu vois l'organiqation générale du site...

Merci encore pour tes conseils

La suite demain !

à+
Sujet clos
Aller à