28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous !

je crois que j'étais déja membre ici il y qq temps mais ayant perdu mon pseudo et changé de mail j'ai recréé un compte... anyway

Mon problème est le suivant et je n'ai pas réellement trouver réponse ici sur le forum avec la search

Voici le code html et le css pour un exemple de la présentation que je souhaite

[code=html]<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
	
	<head>

		<title>project</title>

	</head>
	
	<body id="home">

		<div id="page"></div>
		<div id="foot"></div>
		</body>
</html>
	


le css :


[/code]
#home {
    width: 0 auto;
    margin: 0 0 0 0;
    padding: 0;
    top: 0;

}

#page {
    position:relative;
	height: 200px;
    margin: 0 auto;
    width:964px;
	background-color: #000;

}


#foot {
	height: 200px;
	background-color: red;
	position: relative;
    margin: 0 auto;
    width: 100%;



maintenant ce que je souhaiterai faire :

faire en sorte que la div #foot prennent 100% du reste de l'espace de la page laissé par le contenu de la div #page

La div #foot doit donc, quoi qu'il arrive, être collée en bas et s'étirer en hauteur en fonction de la taille de la div #page

je ne sais pas si j'ai été bien clair, sinon je vous met une image de se que ca doit rentre upload/35489-site.jpg



merci a tous ! Smiley biggrin
Modifié par eszwal (24 Jan 2011 - 13:43)
Bonjour,

j'espère que tout le monde va bien aujourd'hui !

Personne pour m'aider un peu sur mon problème ? Smiley decu
Bonsoir,

A ma connaissance si ton contenu de ton div "page" s'étire verticalement ce que tu demandes est infaisable en CSS mais peut être en passant par javascript.
Ce que je te conseil c'est de ruser en utilisant la méthode suivante :
- tu attribue une couleur ou image de fond à ton body qui sera identique à celle que tu souhaites pour le fond de ton footer (ici dans ton exemple ton body aura un background color rouge)
- tu attribue ensuite une couleur de fond à ton div "page"
- tu places ton footer en position "fixed" avec un "bottom" à 0

Dans ce cas, ton footer restera dans tous les cas en bas de ta fenêtre et le fond de ton footer paraitra donc s'étirer jusqu'en bas de la fenêtre de ton navigateur.

Mais comme dis, tu ne pourra pas adapter dynamiquement ton div footer en hauteur sans passer par un script.
Modifié par Spacedementia (23 Jan 2011 - 23:52)
Hello !

merci pour ta réponse et je dois t'avouer que j'ai utilisé cette petite ruse et ai résolu mon problème pendant le we. Smiley biggrin

j'ai collé la même couleur de fond sur la balise html que la couleur du footer et ai tout simplement juxtaposé (l'une en dessous de l'autre) les deux div page et foot. La div foot est collée au bas de la balise page et du coup bouge en fonction de la taille de cette dernière. Comme la couleur de fond de la page est la même que le footer l'illusion que le footer grandi est parfaite Smiley lol

merci pour ta réponse en tout cas et tu vois on a eu la même idée Smiley ravi
Modifié par eszwal (24 Jan 2011 - 14:29)