overflow sur un div de hauteur fluide

Version imprimable

17/03/2013, 22h11
SylvainPV

overflow sur un div de hauteur fluide

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
17/03/2013, 22h35
rodolphebrd

Bonjour,

Et en passant par la position fixed (si j'ai bien compris ce que vous vouliez)
17/03/2013, 22h56
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. :(

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

Code:

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.

18/03/2013, 00h15
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.

Une petite ligne de Js suffirait peut-être?

Code:

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

18/03/2013, 16h40
SylvainPV

Okay, je fais ça en JS alors. Le CSS a encore un bout de chemin à faire !
Merci pour le coup de main