28172 sujets

CSS et mise en forme, CSS3

Gabarit de site en full-height

Bonjour à tous,

J'essaye de créer un gabarit pour un site comportant 3 parties:

- un header
- un container
- un pied de page

le tout occupant toute la hauteur de la fenêtre quand le container est de taille reduite. J'ai donc le code suivant:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Test Gabarit Full Height</title>
<style>
html { overflow:auto; }

html, body {
	margin:0;
	padding:0;
	height:100%
}

body { background-image: url(../Image/bgd_body.png); }

div#site {
	position: relative;
	width: 800px;
	min-height: 100%;
	margin: 0 auto;
	border: 1px solid;
}

div#banniere {
	position: relative;
	height: 200px;
	background-color: green
}

div#container {
	position: relative;
	padding-bottom: 60px;
	background-color: lightblue
}

div#pied {
	position: absolute;
	bottom: 0px;
	width: 100%;
	text-align: center;
	background-color: red
}

div#pied p {
	margin: 0;
	padding: 10px 0;
}
</style>

<!--[if lte IE 6]>
<style type="text/css">
div#site {
	height: 100%;
}	
</style>
<![endif]-->
</head>
<body>
<div id="site">
	<div id="banniere">banniere</div>

        <!-- Debut du Container -->
	<div id="container">
		<h1>Le Contenu du Site...</h1>
                Blabla<br />
                Blabla<br />
                Blabla
	</div>
	<!-- Fin du Container -->
	
	<div id="pied">
		<p>Mon pied de page</p>
	</div>
<div>
</body>
</html>


Le site s'affiche bien dans toute la hauteur de la page, néanmoins la div "container" se ferme après le texte laissant ainsi un "vide" jusqu'au pied de page laissant apparaitre le background de l'élément body. Je pourrais tout simplement mettre une couleur de fond à la div "site", cependant si je met une bannière comportant de la transparence je perdrais cette effet avec l'apparition de la couleur de background déterminée pour la div "site.

Donc ma question est la suivante:
Comment faire pour "étirer" la div "container" jusqu'au pied de page recouvrant ainsi la partie "vide" ?

Merci de vos réponses...

PS: Je vous joint une image qui vous parlera peut-être plus

upload/9539-gabarit.png
Modérateur
bonsoir,

le background en bleu clair doit-etre appliqué au conteneur principal #site , c'est son role d'occuper au moins la hauteur de ton ecran et d'afficher le fond .

Le div#container , quand à lui est la pour recevoir le contenu et étendre #site au dela de l'écran et repousser le pied a l'aide d'une marge interne de préference.

gc
FastSnake: la gestion du min-height: 100% dans IE6 est déjà prise en compte dans le code de kojiroh. Sa demande ne porte d'ailleurs pas sur ça.

papyjo: le endif dans le code de kojiroh est correct. Pour rappel, ce forum utilise des crochets pour différents éléments de mise en forme, dont l'ajout de smileys. Si j'écris [ smile ] sans les espaces, j'obtiens Smiley smile . Le [ endif ] sans les espaces (tel qu'il doit être écrit normalement) donne donc [endif] (code HTML: <img src="smilies/endif.gif" alt="endif">).

Pour revenir au sujet, gcyrillus donne la bonne réponse.

Techniquement, il n'y a pas vraiment de moyen fiable et compatible pour dire à un bloc de prendre «toute la hauteur disponible» ou «toute la hauteur disponible jusqu'à tel point».
Le plus simple sera effectivement d'utiliser ton conteneur global (ici div#site) pour dessiner le fond allant jusqu'en bas.
Merci pour vos réponses,

Comme je l'avais mentionné dans mon poste initiale, je me doutais bien qu'il fallait appliqué le background à la div #site, mon problème était ke je vais utilisé une bannière comportant des effets de transparence, de ce fait il apparaitra donc a ces endroit la couleur du background de #site et non plus le background déterminé pour le body.

Pour remedié à ce problème, j'ai donc eu l'idée d'appliquer non pas une couleur mais une image fixe avec un décalage vertical égale au height de la bannière à #site. Cela à pour effet de couvrir le "vide" entre le #container et le #pied lorsque le #container est court. Pour les page plus longue, le background de #container reprend le dessus. Pour convenir à la majorité des résolution l'image utilisée à une hauteur de 1600px.

voici maintenant le code que j'ai ajouté:

#site {
    position: relative;
    width: 800px;
    min-height: 100%;
    margin: 0 auto;
    [b]background-image: url(../Image/bg_site.png);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center 200px;[/b]
}


Je ne sais pas si cette solution est la plus approprié mais elle à le mérite de fonctionner pour cette occasion.
Salut,

a écrit :
Je ne sais pas si cette solution est la plus approprié mais elle à le mérite de fonctionner pour cette occasion.
Mais qu'est-ce qui va se passer quand le contenu sera assez long pour allonger la page ? Ton image de fond ne se répétant pas, tu vas te retrouver sans rien en arrière-plan Smiley cligne

Je vois 2 solutions :

1) Accepter de ne plus avoir d'image en arrière-plan et essayer de bidouiller pour avoir une dégradation correcte Smiley ohwell

2) Oublier la transparence de la banière et "tricher" dans ton éditeur d'images favori. Il te suffit en effet de créer une image opaque simulant la transparence (en gros, tu fais comme ton image transparente, sauf que tu rajoutes l'image de fond de body en dessous) pour régler le problème Smiley cligne
pas du tout, quand la page est plus grande que l'image, c'est donc que container est long, et c'est le background de ce dernier qui prend le pas.
Sujet clos
Aller à