Merci ChickN pour ta réponse, ta solution me rapproche du résultat voulu mais, ce n'est pas totalement ce que je recherche, si j'applique height: 100%; la div aura pour grandeur toute la page, mais du fait qu'il y a le header juste avant ça fais header + corps du coup il y a un scroll de la hauteur du header .. :\
@Can : je n'ai pas très bien compris la valeur que tu veux que je mette dans le margin-top, j'ai mit margin-top:150px; mais la marge se situe entre le menu & le corps :|
@Lobor : j'ai essayer ton code, mais je n'obtiens pas de résultat concluant :\
C'est simple, tu mets 100% à la hauteur, et tu regarde la taille que prends ta bannière en pixel et tu mets cette valeur en margin top.
Ce qui fait que ton div vaut "Toute la hauteur la page" (height) - "La taille de ta banière" (margin-top). T'as compris ?
Je comprends vraiment pas j'ai toujours le même problème qu'avant, On pourrait croire que la div central fait toute la page & que la div copyright est bien en bas, mais le problème est qu'il y a le scroll & qu'il y a un espace entre la fin de la page & le copyright , regardez par vous même :
Voici mes sources actuelles :
home_fr.php
<html>
<head>
<title>High Sport Community - 2011</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="header">
<a href="home_fr.php"><img id="logo" src="img/logo/logo.png"/><p id="top">High Sport Community</p></a>
<div id="connection">
<ul>
<li>Login <INPUT type="text" value="Login.." name="login"><br/></li>
<li>Mot de passe <INPUT type="password" value="......." name="password"></li>
<li><br><a href="inscription.php"/>Pas encore membre ?</a></li>
</ul>
</div>
</div>
<div id="menu">Lien - Lien - Lien - Lien</div>
<div id="corps">
ACCUEIL
<div id="right_bar"> COLONNE DROITE</div>
<div id="copyright">COPYRIGHT // PARTENAIRE ETC ..</div>
</div>
</body>
</html>
Suivant ce que tu veux, ça peut être assez délicat, car il faut qu'il s'agrandisse aussi si le contenu dépasse la hauteur de la page.
J'avais fait un tuto qui allait à peu près dans ce sens (c'était pour placer un footer en bas) et qui n'a pas été validé, mais le résultat serait similaire à ce que tu attends, alors je te le copie-colle tel quel, si ça peut t'aider :
Citation : warpShadow
Lorsqu'un site possède une hauteur totale plus grande que l'écran sur lequel il est vu, on peut alors descendre la page vers le bas, jusqu'au bas de la page en question ; là, le défilement est arrêté, le pied-de-page, ou "footer" en anglais, est alors fixé naturellement au bas de la page et de l'écran.
Mais dans le cas où la hauteur totale de la page est inférieure à la hauteur de l'écran, alors le pied-de-page, toujours placé au bas de la page, n'atteint pas le bas de l'écran.
Si certains design ne sont pas gênés par cette éventualité, ce n'est pas le cas de tous. Pour palier à ce problème, nous allons devoir faire en sorte que le design adopte la taille du contenu si la taille de la page est supérieure à la taille de l'écran, mais que la taille minimale de la page ne puisse pas être inférieure à la taille de l'écran.
Pourquoi mettre le bloc "footer" en dehors de "bloc-principal" ?
Toute l'astuce est là, c'est le fait de placer le pied-de-page en dehors du bloc du contenu qui va permettre de le fixer au bas de la page, mais aussi de l'empêcher de passer par-dessus le texte du contenu.
Allons-y !
La première étape est donc de donner à <html> une hauteur de 100%, qui servira à définir pour les balises enfants à quoi correspondent les valeurs en pourcentage que nous allons leur donner par la suite. La première balise enfant étant <body>, nous lui attribuons également cette valeur.
html, body {
height: 100%;
}
Il nous faut ensuite donner à notre conteneur principal, "page", une hauteur de 100%. Mais nous n'allons pas utiliser la propriété height, car celle-ci défini une hauteur définitive ; à la place, nous ferons usage de min-height, qui défini une hauteur minimale pour le conteneur : Ainsi, Si la fenêtre est plus grande que la page, alors le conteneur prendra toute la hauteur disponible, mais ne sera jamais plus petite que 100% -soit la taille du contenu de la page- et ne chevauchera donc jamais ledit contenu.
Il faut également préparer le positionnement du pied-de-page au bas du conteneur, aussi nous appliquons un paramètre de position relative à page.
#page {
min-height: 100%;
position: relative;
}
Nous passons maintenant au conteneur "bloc-principal". L'astuce consiste à lui attribuer une marge interne de la hauteur du pied-de-page (ici, 100px). Cela a pour but de bien définir la fin du conteneur à la fin de son contenu. Sans ce paramètre, vous vous rendrez compte que le pied-de-page se superposerait au bas du contenu sur 120px, soit sa propre hauteur.
#bloc-principal {
padding-bottom: 100px;
}
Maintenant, nous nous attaquons au pied-de-page. Il faut que celui-ci ait tout d'abord une hauteur définie (même s'il s'agit d'un pourcentage), puis il faut lui affecter un positionnement absolu. Comme son parent direct, le conteneur "page", est en positionnement relatif, "footer" se sert de cette référence pour savoir où se positionner. Enfin, grâce au positionnement absolu, il suffira d'accrocher le conteneur au bas du bloc parent.
@warpShaow : C'est une belle solution (et surtout un beau tuto) mais ceci ne marchera pas sur IE<8 et je ne suis même pas certain que IE8 l'affiche bien.
IE8 l'affichera bien oui (testé) ; après, la question est de savoir si on veut se pencher sur IE7 ou l'aider à sombrer plus rapidement en faveur de ses successeurs et ses concurrents.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Une div qui descend jusqu'en bas de la page
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !