Discussion :

[pierrot10]

Bonjour,
Je vais essayé dêtre le + claire possible
J'ai 3 <div>s tous en position:relative.

Le premier <div> a une hauteur fixe de 100px

Le deuxieme <div> contient du texte et sa hauteur peut dependre de la quantité du texte.

Le dernier div, il faut qu'il soit toujours "skotché" au div du dessus, mais aussi "skotché" au bas du browser. quelque soit le grandeur du browser.

Comment faire, dans mon CSS, pour qu'il soit toujours en bas du browser et que ca hauteur depende de l'espace restant.

J'ai essayé des millier de truc, j'arrive faire pour qu'il soit toujours en bas, ca c'est pas un probleme. je peux aussi faire qu'il soit "skotché" au div du haut, mais je peux pas définir une auteur fixe, et non plus pas une hauteur de 100% car sa hauteur va etre de 100% + la hauteur des div précédent, donc je vais retoruver des ascensseur et c'est pas mon but. J'ai essayer avec de position:absolute et relative. Bref sans résultat.

Si quelqu'un aurait une solution!

Merci

[yjuliet]

As-tu essayé quelque chose du genre ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<style>
  #container { height: 100%; }
  #div1 { height: 100px; }
  #div2 { height: auto; }
  #div3 { height: 100%; margin-bottom: 0; margin-top: 0; }
</style>
<div id="container">
 <div id="div1" ></div>
 <div id="div2" ></div>
 <div id="div3" ></div>
</div>

[pierrot10]

Salut,
merci, j'ai essayé ta proposition avec le height:auto; mais ca change rien

[Candygirl]

Quelques questions pour éclaircir ce que tu souhaites vraiment obtenir:

- Que se passe-t-il avec ton dernier div si le texte du div central dépasse la hauteur de la fenêtre ?

- Que veux-tu mettre dans ton dernier div ? (image, text,...)?

[pierrot10]

Salut,
Mon dernier div est coller en bas de mon browser

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
#bottom{
	position:absolute;
	padding:1px 0px 1px 0px;
	color:#660099;
	font-size:10px;
	border-top:1px solid #f8f8f8;
	background-color:#f8f8f8;
	width:100%;
	text-align:center;
	bottom:0px;
}

Ca sera qu'une ligne texte

Si mon deuxieme div, donc celui qui le précède, je mets 100% de hauteur, il il prend bien le 100% de mon browser, mais vu que j'ai le premier div, qui le précède et qui a une hauteur de 200px, deuxième div, depasse le trosieme div. de 200px. en autre mots, le 2eme div, passe "desous" le 3eme div. Env. 200px du 2eme div, est dessous le 3eme div.

deuxieme div:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
#bg{
	margin: 0px auto 0px auto;
	background-position:center;
	background-image: url("img/bg_degrade2.gif");
	background-repeat:repeat-y;
	width:770px;
	padding:0px 10px 10px 10px;
	height:auto;
}

J'aimerais donc que le deuxieme dix, parte du bas du premier et qu'il soit flexible de maniere a que le bas du 2eme div soit toujours "coller" au 3eme div, quelque soit la taille de la fenetre du browser

le div 1 et le div 3 ont une heuteur fix

[Candygirl]

J'aimerais donc que le deuxieme dix, parte du bas du premier et qu'il soit flexible de maniere a que le bas du 2eme div soit toujours "coller" au 3eme div, quelque soit la taille de la fenetre du browser

le div 1 et le div 3 ont une heuteur fix

ça j'avais bien capté, mais tu n'as pas répondu à ma première question:

Quel comportement adoptes-tu si le deuxième div contient plus de texte que la hauteur de la fenêtre - tes 2 divs ?

En supposant que si le contenu du div2 est plus haut que la hauteur restante tu aies un scroll normal, tu peux faire ainsi:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div id="global">
  <div id="div1">top</div>
  <div id="div2">contenu</div>
</div>
<div id="div3">footer</div>

Tu appliques un min-height de 100% à ton #global ainsi que ton image de fond du contenu:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
html, body {height:100%;}
 
body {margin:0;padding:0;}
 
#global {
  min-height:100%;
  background:url("img/bg_degrade2.gif") repeat-y center;;
}
 
* html #global {height:100%;} /* min-height pour IE6 */

Tu laisses ton div2et ton div3 normalement dans le flux, sauf que tu appliques un padding-bottom au contenu = à la hauteur de ton footer + éventuel espacement et tu donnes un margin-top négatif à ton footer = à sa hauteur afin de le remonter:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
#div2 {
  padding-bottom:2em;
}
 
#div3 {
  margin-top:-1.5em;
  background-color:#F00;
}

enfin c'est une base, après il y a plein de petits ajustements qui peuvent s'avérer nécessaires.

Maintenant si tu veux que seul le div central soit scrollable, c'est un tout autre montage.

[pierrot10]

Salut,
excuse moi, j'ai mal repondu a ta question, en effet.
Ben le div 2 s'agrandira en fonction de la quantité de texte (pas de scrollbar dans le div)

En fait pour le moment au stade de ma maquette, le texte est petit, donc y a un espace entre le div 2 et le div 3 (vu que le div 3 est coller en bas de mon brower), que j'aimerais donc éviter dans le cas ou le contenu du div 2 est petit. Si le contenu du div 2 est important, alors la le div deux prendra la hauteur qu'il devra prendre en fonction du texte. Et s'il le faut il peut deplacer l'espace du browser (=scroll bar du browser). Le div 3 devra donc suivre le div 2, rester toujours dessous ce dernier.

Je vais regarder ce que tu ma donner. Ca l'ai bien intéressant

Merci pour ton aide