28173 sujets

CSS et mise en forme, CSS3

[resolu]Hauteur fluide

Bonjour à tous,

Après un fouillage sur tout le web, dans divers forum et tutos, à la recherche de comment créer un design extensible en hauteur, je tombe sur ce site, et ses explications.
La je me dis ok, c'est bon, voila ma solution :
html et body à height : 100%.

Je test, verdict : non, encore un souci. Je recherche à nouveau. Bon, peut-être en appliquant un min-height de 100% à mon élément alors...toujours pas...

Alors, désolé pour le enième post sur les design extensible, je sais qu'il ya des tuto sur ce site et partout ailleurs, je ne compte même plus combien j'en ai lu se rapportant à la hauteur et aux design fluide, et rien à faire, ca ne veut pas, et la je craque !!

Alors voila le topo :

Mise en forme xhtml du site :

<div id='banniere'></div>
<div id='extend_ban'></div>

<div id='menu'>Mon menu</div>

<div id='corps'>Mon contenu</div>



Code css : 

/* 
*Donc comme prévu, on met les conteneur à 100%
*/
html, body
{
	width : 100% ;
	height : 100%;
	margin : 0px;
	padding : 0px;
}

/*
*La bannière rendu extensible :
*banniere prend une image qui ne se repete pas
*et extend_ban repète la fin de la bannière
*/
#banniere
{
	width : 699px ;
	height : 100px ;
	background : url('../images/banniere.jpg') no-repeat ;
	float : left ;
}
#extend_ban
{
	width : auto ;
	height : 100px ;
	background : url('../images/extend_ban.jpg') repeat-x ;
	margin-bottom : 00px ;
}

/*
*L'élément qui me pose problème
*/
#menu
{
	clear : both;
	min-height : 100%;
	float : left;
	width : 210px;
	background-color : white ;
	color : black ;
}

/*
*Et le corps pour finir
*/
#corps
{
	margin-top : 10px;
	margin-left : 220px;
	height : auto;
	width : auto;
        background-color : white ;
}

Alors :
Comme vous le voyez, la bannière flotte à gauche, pour permettre à l'extension de venir se placer sur sa droite.

De même, le menu flotte à gauche pour laisser le corps venir sur sa droite.

Dès maintenant il y a un problème : en effet, même s'il n'y a rien dans le contenu, le menu de taille 100% va faire un scroll sur la page : il aura la même taille que la page, et se décalera sur le bas à cause de la bannière...

Ensuite, autre problème : si le contenu dépasse de la page, le menu, magré sa min-height : 100% ne s'étend pas...

Et, chose bizarre : j'applique des bordures à mes différents <div> ainsi qu'à mes éléments <html> et <body> :
-si html et body sont en height 100%, comme dit plus haut, le menu dépasse de la page malgré le fait que le contenu soit vide (à cause de la bannière) : mon cadre body et html font la taille de la page, le menu dépasse...alors que techniquement, il est dans body et dasns html....

-Si html et/ou body sont en min-height 100%, alors cette fois body et html prenne bien tout en compte, mais le menu ne fera plus que la taille du texte qu'il contient.


Est-ce que quelqu'un pourrait me dire comment remédier à ces problèmes ? Ou une piste, un contournement, quelque chose...?
Ou même me dire que je ne suis qu'un abr***, car ce genre de chose a déja été expliqué X fois, et qu'il faudrait que j'ouvre les yeux....et me filer les liens Smiley lol !!

Merci d'avance à tous ceux qui voudront bien m'éclairer.
Modifié par Paracétamol (16 Feb 2011 - 04:07)
Le problème des height:100% et min-height:100%, c'est qu'il prend la hauteur de ta fenêtre. Par exemple 768px pour un navigateur en 1024x768 (en fait un peu moins à cause des barres d'outils). Donc si ton contenu fait plus que ça, quand tu scrolles, le menu ne va effectivement pas jusqu'en bas.

Essaie peut-être les colonnes factices.

Sinon donne-nous un peu plus d'informations (page en ligne, capture d'écran) pour qu'on puisse mieux comprendre ce que tu veux faire.
Voila deux imprime ecran avec quelques commentaires :
Le 1er et le 2ème.

Ce que je veux faire est simple (dans la théorie Smiley lol ) : je veux que mon menu ne force pas ma page "à aller plus bas", comme c'est le cas maintenant (voir 1er lien), et descende jusqu'en bas de la page, inversement de maintenant (voir 2ème lien).

a écrit :
Le problème des height:100% et min-height:100%, c'est qu'il prend la hauteur de ta fenêtre.

Je croyais justement que min-height indiquait la taille minimum, mais permettait d'être plus grand. Or, que je mette height ou min-height ne change abolument rien....

Au pire, je peux essayer les colonnes factices, mais n'y a t'il aucune autre solution ??


Sinon, j'ai pensé aussi à la position : fixed pour le menu. Problème, comme mon menu est décalé du haut, lorsque je scroll vers le bas, il y a un trou au dessus (à cause de la bannière) .
Donc je me suis dis : je met mon menu en fixed ET ma bannière.
Problème, pas moyen de mettre les deux parties de ma bannière en fixed....
A mon avis le plus simple c'est de mettre ton bleu en image de fond du body en repeat-y. Avec html et body en height:100%.

Comme ca tu auras toujours ta colonne indépendament des contenus.


Et juste au passage, pour les images de fond qui se repètent, on les fait généralement de 8 ou 16px. Ca augmente presque pas la taille par contre ca diminue sensiblement le nombre d'images à afficher. Donc c'est normalement plus rapide.
Ok, je ferai un test avec les colonnes factices alors. Ca m'a l'air pas trop mal comme truc, mais bon, une solution via le code css aurait été mieux... Smiley decu
C'est quand même une des rares choses qu'on ne peut pas faire avec css, mais que fait le w3c ?? Smiley lol

Sinon, j'ai finalement réussi à faire un truc à peu près correct avec les 
position : fixed

et 
overflow : auto

sur ma bannière et mon menu. J'ai tout de même un souci avec ca : le scroll n'apparait pas quand la page est assez petite, normal, mais quand il apparait, il le fait DERRIERE la bannière....

Je mets des imprime ecran parce que je pense que c'est pas clair :
Pas de scroll
Scroll derriere la banniere

Et le code css qui va avec : (le code html est toujours pareil)

html, body
{
	width : 100% ;
	height : 100% ;
	margin : 0px ;
	padding : 0px;
	overflow : auto;
}

#banniere
{
	width : 100% ;
	height : 100px ;
	background : url('../images/banniere.jpg') no-repeat ;
	position : fixed;
	top : 0px;
}

#menu
{
	position : fixed;
	top : 100px;
	width : 205px;
	height : 100%;
	margin-top : 00px;
	padding-top : 10px;
}

#corps
{
	min-height : 80%;
	padding : 10px;
	width : auto;
	background: url('../images/fond.gif') repeat ;
	margin-top : 105px;
	margin-left : 215px;
}



Mais il me semble quand même avoir lu je ne sais plus trop ou que c'était déconseillé d'utiliser cela. Vrai ou non ??
Et, si je laisse de cette façon, y a t'il un moyen de faire "accepter" le code par IE ??
Parce que la c'est Smiley eek Smiley eek quand même ...

Merci de m'aider en tout cas, et si d'autre ont des suggestions, propositions, tutos, indices, pistes ou autres, je suis preneur Smiley lol
Bonjour,

Sauf votre respect, la hauteur est toujours fluide non?
Où alors j'ai rien compris !! Smiley biggol
krok88 a écrit :
C'est quand même une des rares choses qu'on ne peut pas faire avec css, mais que fait le w3c ?? Smiley lol

Si tu parles de comment obtenir deux blocs de même hauteur sans passer par un tableau HTML, on peut tout à fait le faire en CSS, on peut tout à fait le faire en CSS, avec display: table-cell.

La question est donc plutôt : mais que fait Internet Explorer ? Réponse : il n'implémente pas display: table-cell.
Florent V. a écrit :

La question est donc plutôt : mais que fait Internet Explorer ? Réponse : il n'implémente pas display: table-cell.

Même dans IE7 ?
Modifié par <nicolas> (05 May 2007 - 11:27)
<nicolas> a écrit :
Même dans IE7 ?

Oui, même dans IE7.

On verra pour IE8...
Modifié par Florent V. (05 May 2007 - 14:55)
a écrit :
Sauf votre respect, la hauteur est toujours fluide non?
Où alors j'ai rien compris !!

Hum, oui et non....disons que ce que je veux faire c'est qu'un bloc dépende de la hauteur de ma fenêtre, même si celle-ci fait plus de 100%. Or, apparement c'est pas vraiment possible sans "triche".

a écrit :
Si tu parles de comment obtenir deux blocs de même hauteur sans passer par un tableau HTML, on peut tout à fait le faire en CSS, on peut tout à fait le faire en CSS, avec display: table-cell.

Non, non. Je ne veux pas deux bloc de même hauteur sans tableau, je veux un bloc qui fasse la hauteur de ma fenêtre en tout temps, que celle-ci soit vide ou pleine.

Et sinon, pour mes histoire de scroll, position fixed et overflow auto, est-ce que quelqu'un a une réponse à m'apporter ??
Salut,

Il y a peut être (jamais testé) html, body position: relative; height: 100%
conteneur: min-heigh: 100%
colonne position: absolute top: 0; bottom: 0; et un width.
Ca ne devrait pas passer sous IE6 ... mais bon Smiley lol
krok88 a écrit :
Non, non. Je ne veux pas deux bloc de même hauteur sans tableau, je veux un bloc qui fasse la hauteur de ma fenêtre en tout temps, que celle-ci soit vide ou pleine.

Ah oui d'accord. Ben ça se fait assez facilement en CSS. Voir par exemple la page suivante :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test</title>
	<style type="text/css">
	html, body {
		height: 100%;
		margin: 0; padding: 0;
	}
	div#global {
		position: relative;
		min-height: 100%;
		background: #fed;
	}
	div#gauche {
		position: absolute;
		top: 200px;
		left: 0;
		bottom: 0;
		width: 200px;
		background: red;
	}
	div#droite {
		margin-left: 250px;
		height: 200px;
		background: blue;
	}
	</style>
</head>

<body>
<div id="global">
	<div id="gauche">bla bla.</div>
	<div id="droite">bli bli.</div>
</div>
</body>
</html>

Il suffit de passer la hauteur de div#droite à 2000px au lieu de 200px pour observer le comportement de div#gauche.

Par contre, niveau support sous Internet Explorer... il me semble que ça ne passe ni avec IE6, ni avec IE7 (à confirmer pour IE7). Mais c'est bien dans la spécification CSS, et implémenté par la plupart des autres navigateurs.
Super, ca marche....ou presque Smiley bawling

En fait, pour le menu (soit le div gauche) il n'y a pas de problème....mais, maintenant, c'est mon corps (donc le div droit) qui ne vas pas jusqu'en bas comme le menu Smiley eek Smiley eek Smiley biggol

Je deviens fou..... une solution ??
krok88 a écrit :
En fait, pour le menu (soit le div gauche) il n'y a pas de problème...

Ben oui, c'est fait pour...

krok88 a écrit :
mais, maintenant, c'est mon corps (donc le div droit) qui ne vas pas jusqu'en bas comme le menu

Ben forcément, tu ne lui a pas demandé de le faire... Smiley rolleyes
Pour ce bloc là, le dimensionnement via le positionnement absolu est proscrit, il faudra utiliser une hauteur minimale. Mais comme tu ne peux pas faire un min-height: 100% moins la hauteur de l'en-tête, ça me semble peine perdue. Par contre, il est toujours possible de donner l'impression d'un bloc qui prend au minimum la hauteur de l'écran. On en revient aux colonnes factices, à l'utilisation des images de fond ou simplement des couleurs de fond sur un conteneur global ou sur body, etc.

Je vois pas trop ce qui te turlupine comme ça en fait. Le design que tu veux réaliser a l'air relativement simple.
a écrit :
Le design que tu veux réaliser a l'air relativement simple.

Oui, c'est ce que je me suis dit aussi......au début Smiley lol

a écrit :
Mais comme tu ne peux pas faire un min-height: 100% moins la hauteur de l'en-tête, ça me semble peine perdue.

Donc, c'est pas si simple que ca n'est-ce pas ?? Smiley cligne

a écrit :
Je vois pas trop ce qui te turlupine comme ça en fait.

Ben....ca fait pas comme je veux... Smiley biggol Smiley sweatdrop

Disons que comme mon titre le dit, je voudrais que tout sois fluide, y compris la hauteur.
J'ai simplement 3 div : banniere, menu et corps. Le menu est maintenant fluide (disons extensible en fait, c'est plus juste), la bannière y est en largeur (normal), reste que le corps, qui y est en largeur, mais pas en hauteur. Alors c'est vrai que dit comme ca, ca parait simple, mais en réalité, c'est un casse-tête !!!!

Merci à toi en tout cas, ainsi qu'à tout ceux qui m'ont filé un coup de main, je vais me debrouiller avec ca, c'est déja super !!
Sujet clos
Aller à