28172 sujets

CSS et mise en forme, CSS3

100% - 100px

Bonjour à tous.

Sur ma page j'ai un header mesurant 100px de hauteur (tous les élements mesure 100% en largeur).
Je souhaiterais qu'un flash occupe toute la place restante, soit 100%-100px en hauteur.
Si je mets 100% en hauteur au flash, sans le header il occupe bien toute la page, mais avec il occupe 100px de plus que la hauteur de la fenêtre du navigateur.

Voici un schéma :
upload/14439-flash1.gif

Merci d'avance pour vos réponses.
Administrateur
Hello,

Voilà un très vieux débat (une recherche préalable t'en aurait convaincu).
Il n'y a pas de réponse miracle, par contre, la FAQ comme d'habitude reste une bonne piste Smiley smile
Oui j'ai lu et j'ai déjà chercher sur d'autres sites.
J'ai déjà tester avec le code proposé ici.
Ce code fonctionne. Smiley smile

Mais le problème survient lorsqu'à la place de <p>blabla</p> (je me réfère toujours au code du lien ci-dessus) je place mon flash :
<object type="application/x-shockwave-flash" data="carte.swf" width="100%" height="100%">
		<param name="movie" value="carte.swf" />
		<param name="quality" value="high" />
		</object>

Dès que je place ceci, le flash déborde de 100px hors de l'écran du navigateur (soit les 100px occupés par le header), donc besoin de scroller si on veut voir le flash dans son intégralité... Smiley decu
Je suis obligé de spécifier width="100%" height="100%" si je veux que le flash prenne toute la place. Sans dimensions sur IE le flash apparaît tout petit, et sur Firefox il n'apparaît plus du tout. Smiley confus

J'ai testé aussi avec des tableaux, mais le Flash ne s'affiche plus, sans compter des problèmes de hauteur sur IE...
Modifié par Ziltoid (27 Jun 2008 - 16:18)
Ziltoid a écrit :
Ce code fonctionne. Smiley smile

Oui, il donne une hauteur de 100% à div#corps. Par contre, il ne donne pas une hauteur de 100% du viewport moins 100px à quel bloc que ce soit. Donc ça ne correspond pas à ce que tu veux faire.

À vue de nez, je ne vois que le positionnement absolu comme solution, mais ça ne fonctionnera pas dans IE6. Pour ce dernier, il faudra sans doute ajouter un script JavaScript pour calculer la hauteur de l'animation Flash.

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

Et côté CSS:
body {
	margin: 0;
	padding: 0;
}
#header {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: red;
}
#content {
	position: absolute;
	top: 100px;
	left: 0;
	bottom: 0;
	width: 100%;
	background: blue;
}
Sujet clos
Aller à