Discussion :

[SylvainPV]

Bonjour,

Je bloque sur une mise en page à réaliser un peu complexe.

Ma page a une colonne sur sa droite elle même décomposée en 3 sections les unes en-dessous des autres.
Celle du haut a une hauteur fluide en fonction de son contenu qui est variable.
Celle du bas a une hauteur fixe.
Celle du milieu est une liste d'éléments, et j'aimerais qu'elle occupe tout l'espace restant en hauteur, tout en pouvant défiler si la taille de son contenu dépasse cet espace disponible.

Voilà où j'en suis : http://jsfiddle.net/rhVJd/

Il faudrait donc que la liste s'arrête là où commence le bloc bleu, avec une scrollbar sur la zone grise.

Est-ce possible sans calcul en Javascript ?
Merci d'avance

[rodolphebrd]

Bonjour,

Et en passant par la position fixed (si j'ai bien compris ce que vous vouliez)

[SylvainPV]

Si j'utilise position:fixed, je me retrouve avec le même problème qu'avec position: absolute; je ne connais pas la hauteur du bloc du haut (orange) donc impossible de placer ma liste correctement.

[rodolphebrd]

Ici je joue avec le padding top et bottom ( heigth du header et rooter)

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
p, ul { margin: 0; padding:5px; }
li {
    height: 50px;
    list-style-type: none;
    margin: 0;
    border-bottom: 1px solid black;
}
 
#rightcolumn {
    position: absolute;
    right:0;
    top:0;
    bottom:0;
    width:200px;
}
 
#top {
    background: orange;
height:50px
  position:fixed;
  top:0;
  z-index:2;
 
}
 
#mid {
    position:relative;
	background: #ccc;
    min-height: 100%;
	padding: 50px 0 200px 0;
 
}
 
#bottom {
    height: 200px;
    width:200px;
    position: fixed;
    background: cyan;
    bottom:0;
}

Avec une hauteur fluide de header je suis pas sûr que ça soit possible en pur css. Il faudra je pense recourir au Js.

Edit: j'ai oublié de recopier le height de top.

[SylvainPV]

Effectivement c'est la hauteur fluide du premier conteneur qui me pose problème. Si elle est fixe je peux tout faire en absolute.

[rodolphebrd]

Une petite ligne de Js suffirait peut-être?

Code javascript :

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

1
2
var height = document.getElementById("top").offsetHeight;
document.getElementById("mid").style.paddingTop = height + 'px';