28173 sujets

CSS et mise en forme, CSS3

Div de height:100% dans une div

Bonjour à tous, j'ai un petit problème de mise en page. Ca fait maintenant 2 jours Smiley bawling

Je veux avoir un header et un footer toujour visible sur la page, mais vraiment toujour ! Ce qui veut dire que le centre doit posséder un ascensseur.
De plus je voudrais que le centre prenne 100% de la place (largeur et hauteur) moins les marges évidament.

Seulement je n'arrive pas à mettre le centre sur 100% de la hauteur avec des marges. je m'explique : j'ai une div "container" qui prend bien 100%, mais ma div "marger" (donc avec des marges) qui est dedans ne s'étand pas jusqu'en bas ou s'étend trop loing suivant le remplissage !

Il y avait la solution de mettre top:100px; + bottom:100px pour FF mais avec IE6 ca ne marche pas.

Voici ce que ce devrai être :
http://www.simedia.fr/tmp/ok.jpg
et voici ce que cela donne :
http://www.simedia.fr/tmp/psok.jpg
ou : http://www.simedia.fr/tmp/liste.html


voici le code css actuel:

html,body {	
			margin: 0px; 
			height: 100%; 
		}
		
		#header       { 
			position: absolute; 
			top: 0px; 
			left: 0px; 
			width: 100%;
			height: 50px;
			background-color:#9999ff;
			z-index: 2;
		} 

		#footer       { 
			position: absolute; 
			bottom: 0px; 
			left: 0px; 
			width: 100%;
			height: 50px;
			background-color:#9999ff;
			z-index: 2;
		} 

		#container       { 
			position: absolute; 
			top: 0px; 
			left: 0px; 
			width: 100%;
			height:100%;
			background-color:#00ff00;
			z-index: 1;
		} 
				
		#marger      { 
			position: relative; 
			margin-top: 100px;
			margin-bottom: 100px;
			margin-left: 50px;
			margin-right: 50px;
			border :1px solid #000000;			
			background-color:#ff0000;
		} 
		
		#center       { 
			position: relative; 
			top: 0px; 
			left: 0px; 
			width: 100%;
			height:100%;
			overflow-y: scroll;
			overflow-x: auto;
			background-color:#ff9999;
		}


et le html actuel :

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

	<div id="container">
		<div id="marger">			
			<div id="center">
				center :<br><br>
				bla bla ...
			</div>
		</div>
	</div>
	
	<div id="footer">footer</div>
</body>


Merci d'avance pour votre aide et vos conseilles.
Je suis nouveau alors j'espère que tout est bien dans les normes du forum. Merci.
Modifié par Le jeune (11 Jul 2007 - 12:38)
Bonjour Le jeune

C'est ce que j'ai fait pour ce site sous IE : www.incentive-france.com

J'ai mis du javascript dans un commentaire conditionnel ie.js

Si c'était à refaire je ne le referais pas car c'est pas bon pour l'accessibilité. En plus ça date de mes débuts en javascript donc c'est mal codé.
Merci de ta réponse 46chroms,

Effectivement j'aivais déja explorer la possibilité du javascript avec "expression()" ou d'autres méthodes comme sur ton site, mais je rechercher quelquechose de plus carré pour l'accéssibilité et le w3C.

De plus sur FF l'ascensseur est sur toute la hauteur de la page.

si non avec Ie je pouvais exploiter des ereurs comme les marges non compris dans le height total, mais alors plus de DOCTYPE W3c et donc plus aux normes !!
Modifié par Le jeune (11 Jul 2007 - 15:49)
Ben déjà tu peux laisser tomber tout tes positionnements absolus et relatifs (et le div marger) et travailler avec des marges intérieures (padding), je suis sûr qu'il y a moyen. Smiley cligne
Modifié par Patidou (11 Jul 2007 - 15:54)
Merci pour ton aide Patidou,

Effectivement les positions absolues et relatifs ne servent pas beaucoup !
Pour ce qui es du margin ou du padding, je ne pense pas qu'il y ai de différence, et pour ce qui est de mon div marger, c'est lui qui me donne les marges de 50px (dont j'ai besoin), donc comment m'en passer ?
Bonjour,

Pour commencer, je souhaiterais dire que ce type de construction est à mon sens une erreur ergonomique épouvantable, en plus de poser quelques problèmes d'accessibilité.
À part pour des choses très spécifiques, ce genre de contruction est à proscrire.

Mon conseil: laisser tomber, et enfin exploiter sans remords la barre de défilement du navigateur (plutôt que des barres de défilement internes).

Patidou a écrit :
Ben déjà tu peux laisser tomber tout tes positionnements absolus et relatifs (et le div marger) et travailler avec des marges intérieures (padding), je suis sûr qu'il y a moyen. Smiley cligne

Si on veut que ça prenne toute la hauteur quelle que soit la résolution, ça va pas être simple...
Le seul moyen efficace que je connaisse pour ça, c'est le positionnement absolu, du type:
div#contenu {
position: absolute;
top: 100px;
bottom: 100px;
left: 50px;
right: 50px;
}

Compatible IE7 (il me semble) mais pas IE6.
Si ça marche dans IE7, envisager une dégradation gracieuse du bouzin dans IE6 via un commentaire conditionnel.
Florent V. a écrit :

Si on veut que ça prenne toute la hauteur quelle que soit la résolution, ça va pas être simple...


Ah oui, j'ai pas fait attention à ça...
Smiley confused

Hum... Je sors...
a écrit :
Pour commencer, je souhaiterais dire que ce type de construction est à mon sens une erreur ergonomique épouvantable, en plus de poser quelques problèmes d'accessibilité.
À part pour des choses très spécifiques, ce genre de contruction est à proscrire.

Bonjour Florent, effectivement ce type de présentation pour un sit web serai un peu pourrie. C'est une page destinée à afficher une liste (avec une scrollbar) avec des infos au dessus et en dessous, tout ca pour une web appli intranet.
Et c'est vraix que c'est pas simple !
Le top+bottom marche bien effectivement mais pas pour ie6 et le 7??

Avec ie ma seule solution est de passer en quirksmode et de mettre un commentaire conditionnel, mais alors plus de norme w3c Smiley mur
Je suis un peu difficile mais c'est ce qu'on me demande de faire Smiley ohwell
Modifié par Le jeune (11 Jul 2007 - 16:58)
Tu peux sans doute essayer une surcouche Javascript (script appelé via un commentaire conditionnel pour IE6 et inférieurs), mais là ça me dépasse.

Le cout de la gestion du mode Quirks pour IE6 risque d'être assez énorme pour le reste de la mise en page... donc à éviter autant que possible.
Sujet clos
Aller à