28172 sujets

CSS et mise en forme, CSS3

Div occupant l'espace restant en hauteur

Bonjour à vous tous,

Tout d'abord je sais et j'ai vu que ce sujet à été traité de maintes fois mais justement je n'arrive pas à trouver la solution :s

En gros j'ai le site suivant :
upload/21051-Capture-de.png
Le soucis c'est que la partie centrale est potentiellement variable. J'ai donc positionné un background-color sur mon body pour la couleur de fond du site (le bleu-vert du bas). Mais mon problème c'est que mon bloc footer est lui aussi de taille variable (celle du navigateur ce coup-ci). Je suis arrivé à faire en sorte que le footer occupe tout l'espace restant après le corps de page mais il m'en "occupe" trop (voir l'ascenseur sur le côté).

Je n'arrive pas à comprendre pourquoi... sachant que j'utilise la "technique" du :
height: 100%;
...
html, body {
height: 100%;
}


Bref je cale, je suis preneur de la moindre idée Smiley cligne
Merci d'avance,
salut,
je n'ai pas bien compris pourquoi tu voulais que le footer prennent le reste de la page(il s'agit bien de la ligne en bas avec nouveaux produit, meilleurs vente etc?), mais ce qui est certain, c'est que si celui-ci a une hauteur de 100% et qu'il est contenue directement dans le body, alors la valeur 100% ne le fera pas occuper le reste de la page, mais le fera bien prendre une taille égale à 100% de la hauteur de la fenêtre.
CAD que si tu as déjà 60% de la hauteur de la page occupé(comme dans ton cas) et que tu rajoute ce footer en 100%, tu auras une page ayant pour auteur au total 160%.
Je parle beaucoup pour ne rien dire...

en espérant avoir répondu à ta question, que je ne suis pas sur d'avoir bien compris.

[edit: tu voudrais que la petite vague en bas de ta boite aille jusqu'en bas de la page?

[edit2: pas très pratique, mais avec une position:absolute; tu peux mettre genre top:60%; bottom: 10px; je pense que ça peu fonctionner, mais j'ai le sentiment que ça n'est pas à recommander... Smiley sweatdrop
Modifié par e-rwan (29 May 2010 - 10:16)
Merci pour ta réponse...
Pour le coup du "160%" tu as totalement raison c'est exactement mon soucis actuel !
Pour la petite vague elle est juste mal positionnée mais ce n'est rien mon problème actuel le plus important étant cette "taille du footer". Sinon pourquoi vouloir le faire aller jusqu'en bas ? Tout simplement car il y a deux "bleus" celui du corps de page que j'ai placé en background-color du body et le bleu plus foncé que j'ai placé en background-color du footer.
Si le footer ne descend pas jusqu'en bas j'aurais donc juste une petite bande bleu foncé pour mes liens de bas de page et tout le reste en bleu "corps de page" :s
Ou sinon je viens d'y penser on peut essayer de voir le problème sous un autre angle et essayer de faire une div contenant le corps de page dans sa totalité (div qui devra donc s'étirer sur toute la largeur du navigateur).

J'ai déjà tenté cette solution mais le corps de page contenant des div flottante la div ne s'adapte pas correctement :s
c'est une bonne idée la div contenant le corps, avec min-height:100%(pour qu'il s'agrandisse si le contenue a besoin de plus), tu le positionne(pour que le footer en absolute n'en sorte pas), et dedans tu met ton footer en absolute avec bottom:0, non?
éventuellement un <hr> en clear both juste avant pour éviter que les float ne passe par dessus le footer.
j'ai du mal a visualiser ton code, tu peux en donner un peu plus, ou la page directement si tu as un FTP?
Pour le coup de la div avec le min-height ce n'est malheureusement qu'une partie de la solution... En réalité on transpose dans ce cas le problème de la hauteur à celui de la largeur lol.

Car le navigateur peut également être étiré en largeur et mon corps de page n'est pas extensible en largeur donc on ne fait que déplacer le soucis.

Pour le code c'est possible mais non souhaitable car celui-ci est plus que rebutant vu que j'utilise un CMS (prestashop) et donc que celui-ci est plus que compliqué mdr...

En gros j'ai une structure comme ceci :

<html>
<body>
<div id="corps">
<div id="element1"></div>
<div id="element2"></div>
</div>
<div id="footer"></div>
</body>
</html>




body {
	background-image: url('../img/header-repeat.jpg');
	background-position: 0 0;
	background-repeat: repeat-x;
	background-color: #06181e; /* Couleur du footer */
}

#corps {
	width: 1024px;
	margin:auto;
}

#element1 {
	float: left;
	width: 800px;
}

#element2 {
	float: left;
	width: 100px;
}

#footer {
	clear: both;
	/* H2EAU - Wave */
	background-image: url('../img/footer-wave.jpg');
	background-repeat: no-repeat;
	background-position: center 2px;
}


Sachant que le "header-repeat.jpg" est un petit bandeau d'1px créant le liserais vert/noir du haut et la couleur de fond de page (corps).

Le "footer-wave" est la petite vague du bas (au passage celle-ci est maintenant correctement alignée Smiley cligne )
j'ai un peu de mal à suivre.
pourquoi mettre cette largeur width:1024px au corps? c'est très large, et une div en block occupe automatiquement toute la largeur d'une page.
en quoi une hauteur minimum affecte-t-elle la largeur de ton corps?
a écrit :
Le "footer-wave" est la petite vague du bas (au passage celle-ci est maintenant correctement alignée cligne )

ton probleme est résolu quant au positionnement du footer?
Modifié par e-rwan (29 May 2010 - 15:55)
En effet je m'exprime mal...
Alors pour ta première question, tout simplement car je désire centrer la div et donc j'ai défini une width afin de pouvoir utiliser les "margin-xxx: auto;".

Pour le coup du footer je parlais juste du positionnement du background-image (qui est en l'occurrence la petite vague) et qui dans mon screenshot était mal positionnée Smiley cligne

J'ai testé ta solution et comme je le mentionnais je pense que la présence dans la div "corps" de div avec float le "perturbe"... du coup si j'enlève la width (et donc le centrage) et que je positionne un background-color (red pour etre sur lol) je ne vois rien.... J'ai testé en positionnant une height au corps et là ça marche... donc il ne me resterait plus qu'à trouver une solution pour qu'il s'ajuste à la taille de son contenu (et donc des elements 1 & 2) même avec ceux-ci en float.

Pour info il s'ajuste bien en hauteur si je le positionne (le corps) en float lui aussi mais du coup il ne prend plus toute la largeur de la page...

Snif, c'est plus complexe que je ne le pensais :s
ta div corps fait 1024px de large, elle prendra dans beaucoup de situation une grande partie si ce n'est toute la largeur, pourquoi la centrer? n'est-ce pas plutôt son contenue que tu veux centrer? en tout les cas je suis persuadé qu'une taille de 1024px est vraiment beaucoup trop, ça va trop souvent créer une scrollbar horizontal(vraiment pas pratique) pour tes visiteurs, AMHA.

tu dis que ta div corps est perturbé par les float? CAD? une boite ne peut-être perturbé par son contenue si ce n'est sa hauteur ou largeur qui s'y adapte.

pour que les float ne dépasse pas utilise des <hr style:clear:both;/>.

j'ai toujours beaucoup de mal à voir ce que tu veux faire, est-ce que je m'en approche avec ça?
Modifié par e-rwan (30 May 2010 - 14:17)
En effet je me suis mal exprimé, les 1024px ne sont donnés qu'à titre indicatif justement... j'aurais du mettre 100px pour etre plus "dans la norme" lol...

Sinon je vais tenter le coup du hr que j'avais je dois bien le reconnaitre oublié... je vous tiens au courant demain Smiley cligne
Bon finalement je viens de tester et "l'actuce" du hr fonctionne à merveille Smiley smile
Le sujet est donc quasi résolu... quasi car je me demande du coup s'il est possible de rendre ce hr transparent sans pour autant le faire sortir du flux ou de l'affichage à des fins esthétiques bien sur ?
visibility:hidden; cache sans sortir du flux je crois, au contraire de display:none;
sinon, perso dans mon css j'ai toujours un
hr{border:none;}

à la fin
Modifié par e-rwan (31 May 2010 - 11:31)
Yess super ça marche...
En fait j'ai fait un 
border: 0px;

Bon ben écoute c'est super j'ai résolu mon soucis... merci encore pour ton assistance Smiley cligne
Sujet clos
Aller à