28173 sujets

CSS et mise en forme, CSS3

Bloc de hauteur de la taille de la fenêtre

Bonjour,

j'aimerais savoir s'il est possible en CSS de faire un bloc qui descend jusqu'à la fin de la page (au cas bien sûr où il ne la remplit pas) ?
Modifié par Sol (25 Apr 2007 - 17:56)
merci mais ce n'est pas exactement ce que je souhaite faire.

Je ne veux pas que ce soit la page qui varie en taille mais le pied justement. J'ai fait quelques tests mais je n'arrive à aucun résultat probant.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Home</title>
	
	<style>
	
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}

div#content {
	width: 60%;
	margin: 0 auto;
	
	background-color: blue;
	height: 100%;
}

div#footer {
	background-color: red;
	
}

	</style>
	
</head>

<body>

	<div id='content'>
	
		<p>yop !!!</p>
		<p>yop !!!</p>
		<p>yop !!!</p>
		<p>yop !!!</p>
		
		<div id='footer'> Je suis le footer</div>
	
	</div>

</body>

</html>


Par exemple dans cette page je souhaiterai que le footer (partie rouge, prenne tout l'écran (mais pas plus). Or si j'applique la propriété min-height : 100% à mon div#footer, celui-ci va bien plus bas que la page.
Modifié par Sol (26 Apr 2007 - 09:53)
Sol a écrit :
merci mais ce n'est pas exactement ce que je souhaite faire.

Il eût été utile de préciser dès le départ ce que tu souhaites faire exactement, alors. Smiley cligne

Sol a écrit :
Je ne veux pas que ce soit la page qui varie en taille mais le pied justement.

C'est techniquement jouable avec le positionnement absolu, en indiquant la position haute et la position basse du bloc. Mais :
- ça fait des mises en page très peu flexibles et casse-gueule ;
- pas supporté par Internet Explorer.
Donc on oublie.

Dans la pratique, ce que tu souhaites faire ne me semble pas possible. Par contre, tu peux donner l'illusion d'un pied de page qui descend jusqu'en bas. Je suppose que si tu veux le faire s'allonger comme ça, c'est pour un but essentiellement décoratif ? Or, le décor, ça se travaille très bien en trompe l'oeil.

Ça va dépendre de ton design, mais tu devrais pouvoir faire un conteneur global prenant au minimum toute la hauteur d'une page (cf. le tutoriel cité ci-dessus), et lui appliquer une image de fond alignée en bas ou en repeat-y, image correspondant au pied de page.

Bref, il va falloir ruser.

À quoi ressemble ton design ? Difficile d'en dire plus sans savoir ce qui doit être réalisé.
Modifié par Florent V. (26 Apr 2007 - 10:45)
Sujet clos
Aller à