28220 sujets

CSS et mise en forme, CSS3

Bloc en absolute à 100% de son conteneur (et non de la page) sous IE

Bonjour,

Ma question se résume ainsi : comment faire pour qu'un bloc positionné en absolute dans un bloc global, lui aussi en position:absolute, prenne 100% de la hauteur de ce bloc global et non de la hauteur de la page ?

Donc :
<div id="global">
<div id="bloc"></div>
</div>

	html, body
		{
		height: 100%;
		width: 100%;
		margin: 0;
		padding: 0;
		background-color: gray;
		}
		#global
		{
		position: absolute;
		height: 100%;
		width: 80%;
		background-color: yellow;
		text-align: center;
		}
		html>body #global
		{
		min-height: 100%;
		height: auto;
		}
		#bloc
		{
		position: absolute;
		height: 100%;
		width: 10px;
		right: 1px;
		background-color: red;
		}
		html>body #bloc
		{
		min-height: 100%;
		height: auto;
		}


Alors là, la hauteur minimale est de 100%. Le bloc #bloc prend correctement 100% de la page, et #global aussi.

Ce qui donne : http://nyro.xeo.online.fr/SdZ/code.php?action=1&id=30
Ce qui est en gris, c'est body, ce qui est en jaune, c'est #global, et ce qui est en rouge, c'est #bloc.

Donc là, le résultat est celui voulu.

Maintenant, même chose, mais en mettant du contenu dans #global afin que celui-ci soit plus grand que la hauteur de la page : http://nyro.xeo.online.fr/SdZ/code.php?action=1&id=31

Sous Firefox, ça fonctionne bien. #bloc prend les 100% de son conteneur (qui est #global). Mais sous Opera et Internet Explorer, #bloc ne prend que 100% de la page alors que #global est absolute.

Comment faire pour que #bloc prenne 100% de son conteneur sous Internet Explorer et Opera ?

Merci d'avance ! Smiley smile
Modifié par Nyro Xeo (23 Apr 2005 - 16:23)
clb56 a écrit :
Sinon il y aurait une possibilité assez simple en javascript mais je ne sais pas si ça t'intéresse.


Merci Smiley smile Ca consisterait à récupérer la hauteur de #global, et de l'appliquer à #bloc, c'est ça ? Si oui, je le ferais en dernier recours.

N'y a-t-il pas un petit hack pour IE, juste pour ça ? D'ailleurs, qu'est-ce qui se passe sous Opera ? Pourquoi ne réagit-il pas de la même façon que Firefox ?
Bon j'ai passé IE en mode quirck en mettant le prologue XML. Ca fonctionne. Mais sous Opera, le problème subsiste.

Cela dit, cela m'embête un peu de passer en mode quirck, n'y a-t-il pas un petit hack "juste pour ça" ?

Merci d'avance Smiley smile
Modifié par Nyro Xeo (06 May 2005 - 21:40)
Salut,

J'ai exploré la question il y a peu car j'avais le même besoin, et j'en ai été réduit à mettre volontairement une taille trop grande, en jouant sur le overflow. Mais ça marche mal quand la taille change.

Je pense donc que je vais passer par javascript sous IE.
Sujet clos
Aller à