28172 sujets

CSS et mise en forme, CSS3

<div>: utiliser toute la place avec une marge (mode strict)

Bonjour,
je cherche à avoir un <div> qui prend toute la place disponible sur la page.
En mode quiks, je n'ai qu'à utiliser et ça fonctionne bien:

<div style="width: 100%; height: 100%"></div>


Le <div> prend bien toute la page moins la marge du <body>
http://www.fdn.fr/~arenevier/tmp/100_percent_1.html

Par contre, en mode strict, ça ne fonctionne plus: si j'ai bien compris c'est normal, car le pourcentage correspond alors à la dimension de la taille nécessaire pour afficher le block parent (dont le contenu ici, est vide):
http://www.fdn.fr/~arenevier/tmp/100_percent_2.html

Du coup, j'ai essayé de mettre mon div en position: fixed et la ça marche moins mal: il prend toute la place. Par contre, la marge du body n'est prise en compte qu'en haut et à gauche.
http://www.fdn.fr/~arenevier/tmp/100_percent_3.html

Enfin, si, pour avoir une marge autour de mon div, j'essaye une solution à base de margin: 1%; width: 98%; height: 98%;, j'ai bien des marges égales à gauche et à droite, mais dans firefox et opera, la marge en haut est beaucoup plus grande que la marge à droite (dans webkit, cela semble fonctionner correctement).
http://www.fdn.fr/~arenevier/tmp/100_percent_4.html

De plus, les 3 solutions à base de position: fixed ne semblent pas fonctionner avec internet explorer (6 ou 7).

Du coup, je cherche une solution:
- qui fonctionne en mode strict
- compatible avec les différents navigateurs (au moins ie, firefox, webkit et opera).

merci d'avance Smiley biggrin
Modifié par arenevier (26 Jun 2009 - 11:40)
arenevier a écrit :
Par contre, en mode strict, ça ne fonctionne plus: si j'ai bien compris c'est normal, car le pourcentage correspond alors à la dimension de la taille nécessaire pour afficher le block parent (dont le contenu ici, est vide)

Non, le pourcentage correspond alors à la hauteur définie pour le parent. Le parent, ici, c'est BODY, et il n'a pas de hauteur définie. Donc 100% de rien = rien.

arenevier a écrit :
Du coup, j'ai essayé de mettre mon div en position: fixed et la ça marche moins mal: il prend toute la place. Par contre, la marge du body n'est prise en compte qu'en haut et à gauche.

Le plus simple avec un élément en position:fixed serait d'utiliser les propriétés top, left, right et bottom plutôt que width et height.
position: fixed;
top: 20px; bottom: 20px;
left: 20px; right: 20px;

OK tous navigateurs sauf IE6 (mais bon on s'en fout, non?).

arenevier a écrit :
Du coup, je cherche une solution

À quel problème exactement? Tu nous as montré des essais, mais sans décrire précisément ton objectif. Quel est le design visé, et comment doit-il se comporter face à une quantité variable de contenu?
Florent V. a écrit :



Le plus simple avec un élément en position:fixed serait d'utiliser les propriétés top, left, right et bottom plutôt que width et height.
position: fixed;
top: 20px; bottom: 20px;
left: 20px; right: 20px;



Merci, je n'y avais pas pens'e, mais effectivement, çà me semble logique.

a écrit :

OK tous navigateurs sauf IE6 (mais bon on s'en fout, non?).

Bof, y'a quand même encore des gens qui l'utilisent ...

a écrit :

À quel problème exactement? Tu nous as montré des essais, mais sans décrire précisément ton objectif. Quel est le design visé, et comment doit-il se comporter face à une quantité variable de contenu?


ma div intègre une carte grâce à openlayers. Je me demande juste, principalement par curiosité s'il y a un moyen de passer le document en mode strict. J'essaye de décortiquer le problème et d'avancer par étapes.
Sujet clos
Aller à