28172 sujets

CSS et mise en forme, CSS3

Header fixe / Content fluide / Footer fixe

Bonsoir à toutes et à tous,

Après avoir parcouru bon nombre de topics du forum, et après avoir utilisé la fonction recherche, je n'ai pas réussi à trouver la réponse à ma question, qui je suis sûr est évidente... Mais je n'ai pas le recul nécessaire pour la trouver.

Pour comprendre mon soucis, je vous invite à vous rendre sur ce lien :

http://seeane.free.fr/test/site.html

Le bleu correspond à mon background, le rose correspond à mon header et à mon footer, et le blanc correspond à mon contenu.

Ma question est simple.

Mon header et mon footer sont fixes et font chacun 96px de hauteur.

(Mes header, content et footer font tous 896px de large)

Mais je souhaiterai que mon footer soit toujours en bas de page, et que mon content remplisse l'espace non utilisé entre le header et le footer.

De plus, si le contenu est plus grand que la page, j'aimerais que mon bloc content s'adapte, déplaçant le footer vers le bas, obligeant l'internaute à scroller.


Je ne sais pas si c'est très clair, mais je souhaite un bloc content qui, si le contenu est trop court fasse toute la page (footer en bas de page) ; si le content est suffisamment grand, scroll, avec toujours le footer en bas de page.

Je vous copie le code (sommaire), à ce stade du développement.


<html>

<head>
<title></title>
<link rel="stylesheet" media="screen" type="text/css" title="style" href="style.css" />
<link rel="icon" type="image/gif" href="design/favicon.gif" />
</head>

<body>

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

<div id="content">
</div>

<div id="footer">
</div>


</body>

</html>




/* ----- ----- ----- ----- ----- */

body
{
	width: 896px;
	margin: auto;
	background: url("design/ds_background.jpg") center fixed no-repeat #0abef9;
	font-family: "palatino linotype";
	font-size: 0.8em;
}

#header
{
	width: 896px;
	height: 5%;
	min-height: 96px;
	background: url("design/ds_header.png") center no-repeat #f21c81;
}

#content
{
	width: 896px;
	height: 100%;
	background: #FFFFFF;
}

#footer
{
	width: 896px;
	min-height: 96px;
	position: absolute; 
	bottom: 0px;
	background: url("design/ds_footer.jpg") center no-repeat #f21c81;
}



J'ai cherché du côté des gabarits proposés, sans rien trouver.

Je vous remercie par avance de votre aide!
Modifié par seeane (20 Mar 2010 - 00:14)
Salut,

seeane a écrit :
je souhaiterai que mon footer soit toujours en bas de page, et que mon content remplisse l'espace non utilisé entre le header et le footer.

De plus, si le contenu est plus grand que la page, j'aimerais que mon bloc content s'adapte, déplaçant le footer vers le bas, obligeant l'internaute à scroller.
ce que tu demandes est expliqué ici : http://covertprestige.info/css/page-hauteur-100/
Modifié par Heyoan (20 Mar 2010 - 00:42)
Bonsoir Heyoan,

Je viens de faire quelques essais, sans succès.

Cependant je ne m'avoue pas vaincu, et je recommencerai demain.

En tout cas, un grand merci à toi pour cette réponse rapide.

J'espère revenir très prochainement avec une résultat à la hauteur de mes attentes.

Merci.
Je ne suis pas convaincu par la solution proposée dans l'article.
C'est assez pénible de devoir savoir si on est en train d'écrire le dernier paragraphe ou non. En particulier quand on affiche le contenu d'une base de données.

J'ai une autre astuce pour la marge nécessaire au pied de page qui est la suivante:


<html>
<body>
<div id="header">Header</div>
<div id="page">Contenu de la page</div>
<div id="decalage_foot"></div>
<div id="foot">Foot</div>
</body>
</html>




*{ margin:0px; padding:0px; }
html{ height:100%; position:relative; }
body{ height:100%; position:relative; }
#header{ height:75px; position:relative; }
#page{ min-height:100%; height:auto; min-width:950px; position:relative; }
#decalage_foot{ height:15px; }
#foot{ position:absolute; bottom:0px; height:15px; width:100%; }

Modifié par Caduchon (31 Mar 2010 - 04:46)
essaie de change tout simplement le bottom de ton footer

mets

margin-bottom:0px; et va voir ce que ça donne Smiley biggrin
Sujet clos
Aller à