Discussion :

[ymoreau]

Bonjour, le titre n'est pas très clair désolé.

En fait je voudrais faire une page avec un div de "menu" de largeur fixe à gauche, la hauteur dépendant du contenu, et un div de "contenu" qui occuperait tout l'espace à droite restant, et toute la hauteur.
J'avais réussi, sauf que le div de "contenu" avait une hauteur dépendant de son contenu et qui agrandissait la page.
Je voudrais que la taille de ce div ne déborde pas de la page (que la page n'ait pas besoin de scrollbar) et qu'il contienne plutôt une scrollbar.
J'ai essayé pas mal de choses, mais à part mettre une taille fixe à ce div (ce que je préférerais éviter), je ne suis arrivé à rien...

Est-ce que c'est faisable ?
merci d'avance.

[Adenora]

Bonsoir,
Si j'ai bien compris, tu ne veux pas une scrollbar pour la page, mais une scrollbar juste pour le div du contenu ?

Edit : si ton problème est bien celui-là, tu peux faire ceci dans le fichier contenant du CSS:

Code :

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

1
2
3
4
5
6
 
#contenu {
	overflow:auto; 
       width: XXXpx;    /* Largeur du div */
	height: XXXpx;  /* Hauteur du div */
}

Si tu enlèves width et height, tu remarqueras que tu ne pourras pas utiliser la scrollbar.

[ymoreau]

Oui tu as très bien compris, je veux que le div ait une scrollbar, et pas la page. Le but est d'avoir le div du menu toujours visible, tandis qu'on fait défiler le contenu uniquement dans l'autre div.

Seulement j'ai aussi précisé que j'aurais préféré ne pas utiliser de taille fixe pour l'autre div. En effet sans rien préciser il s'adapte parfaitement à la largeur de la page quelle que soit la résolution, et j'aurais voulu que la hauteur fasse pareille donc.
J'ai approché ce que je voulais en mettant une taille au div avec des % seulement c'est approximatif, les marges par rapport au reste de la page ne sont pas belles etc.

Donc ma question, est-ce que l'on peut faire la même chose que ce qui est dit au dessus, sans imposer de taille au div (ou en imposant une taille qui prenne exactement la place restante, mais ça c'est pas possible je crois).

[Erwan31]

Bonjour,
oui tu peux le faire (la largeur n'est pas nécessaire mais tu dis avoir une hauteur dépendante de la hauteur de la zone d'affichage).
Mais subtituer la scrollbar du navigateur à celle de ton div est une erreur ergonomique en plus d'être inesthétique.
Mettre ton menu en position fixe (position:fixed) te permettrait d'avoir ton menu toujours affiché et faire défiler le contenu via la scrollbar du navigateur avec comme avantage de ne pas déduire de la largeur du contenu la largeur prise par la scrollbar verticale.

[ymoreau]

C'est vrai que cette solution est bien aussi, peut être plus intuitive pour les visiteurs. Par contre ça ne marche pas sur IE6 (j'ai pas le 7 pour essayer mais selon la documntation il ne le gère pas bien non plus).

Et autre problème mon div "contenu" prend du coup toute la page et passe sous mon div "menu", est-ce que je dois le décaler à la main avec une marge à gauche, ou est-ce qu'il y a une propriété qui le place bien comme il faut ?

[Macmillenium]

Bonjour,

Et autre problème mon div "contenu" prend du coup toute la page et passe sous mon div "menu", est-ce que je dois le décaler à la main avec une marge à gauche, ou est-ce qu'il y a une propriété qui le place bien comme il faut ?

Oui, un margin-left = largeur de ton menu (ou un peu plus, à toi de voir) fera l'affaire.

[Erwan31]

Bonjour,
Oui, un margin-left = largeur de ton menu (ou un peu plus, à toi de voir) fera l'affaire.

+1 C'est normal le positionnement fixe sort du flux normal donc c'est comme si le menu était inexistant.

Pour IE6 oui j'aurais dû préciser pardon. En fait le plus robuste est
de remplacer valeur fixed par absolute uniquement pour IE6-
(via une CSS IE6- appelée avec des commentaires conditionnels) sachant que
ce dernier va être de moins en moins utilisée.

[Macmillenium]

En fait le plus robuste est
de remplacer valeur fixed par absolute uniquement pour IE6-
(via une CSS IE6- appelée avec des commentaires conditionnels) sachant que
ce dernier va être de moins en moins utilisée.

Enfaite, il existe quelques solutions alternatives (uniquement avec le positionnement absolute) qui ne posent pas forcement des problèmes ergonomiques et esthétiques.

J'ai amélioré cet exemple qui ne fonctionne qu'en mode de rendu Quirks.

Je l'ai amélioré en ajoutant un DTD et systématiquement un height:100% sur html.

Code xhtml :

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
 
<!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">
<head>
<title>Résolution du fixed</title>
<style type="text/css">
html, body { margin:0; padding:0; height:100%; overflow:hidden; }
 
#latotale {
        position:relative;
        height:100%;
        width:100%;
        overflow:auto;
}
 
#lanim {
        position:absolute;  
        width:100px;
        height:100px;
        bottom:10px;
        right:20px;
        border:1px solid black;
        background:red;
}
 
</style>
</head>
 
<body>
 
<div id="latotale">
<h1>Résolution du fixed</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus id nibh. Etiam molestie viverra lacus. Vestibulum non enim id nisi imperdiet interdum. Aliquam porttitor, lectus et tincidunt iaculis, arcu nisi ultricies eros, eget cursus lectus eros et ligula. Quisque consectetuer urna in dolor. Aliquam erat volutpat. Maecenas elementum, leo at consequat suscipit, felis eros facilisis ligula, nec tincidunt lectus diam quis diam. Donec ac sem. Donec vestibulum augue vitae diam. Cras mauris augue, imperdiet at, feugiat quis, fringilla eu, mauris. Ut pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In a nibh ac purus imperdiet consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut ut dui ut quam tristique ultrices.
</p><p>
Proin ut augue non lectus ornare tincidunt. Nam facilisis pellentesque tortor. Vestibulum varius dui et felis. Pellentesque tempor dignissim lacus. Phasellus ac nisl non felis mattis sodales. Praesent vel orci eget mauris elementum sollicitudin. Donec non quam. Morbi ipsum eros, accumsan ut, mattis at, porttitor sed, risus. Fusce venenatis ligula sit amet elit. Donec eget ipsum. Aenean dolor. Proin eleifend arcu sed diam. Donec lobortis faucibus dui. Integer tincidunt, mi eu tristique facilisis, turpis quam dictum mi, eget convallis ipsum turpis sed dolor.
</p><p>
Etiam rutrum interdum velit. Nunc nisi quam, aliquet at, pellentesque sed, pulvinar id, mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas nec mi. Fusce non sapien. Integer lobortis urna ac justo. Maecenas condimentum, mi in venenatis placerat, nulla neque accumsan enim, sit amet viverra enim lacus vel sapien. Vestibulum purus est, pretium non, aliquet ut, imperdiet ac, nisl. Sed vestibulum vehicula nibh. Vestibulum bibendum est bibendum mauris. Nam felis lectus, euismod quis, fringilla id, euismod in, est. Morbi sollicitudin. Curabitur vel dolor.
</p><p>
 
Vestibulum eget felis vitae ante luctus ullamcorper. Nunc dui. Proin malesuada elementum est. Cras lectus lorem, semper et, eleifend vitae, lobortis at, lacus. Duis ornare libero ac nulla. Aliquam ac orci sed risus semper pharetra. Etiam vel justo. Vivamus dapibus tellus sed urna. Suspendisse tortor metus, ultricies adipiscing, tempus vitae, nonummy non, odio. Cras est nisl, feugiat eu, ultrices ac, auctor eget, ligula.
</p><p>
Proin pulvinar euismod magna. Curabitur justo dui, convallis at, blandit quis, laoreet id, metus. Nulla facilisi. Praesent posuere erat ac ante. Donec nulla justo, accumsan quis, porta non, molestie vel, ligula. Donec lacinia blandit pede. Donec et ante. Integer nulla mi, fringilla id, bibendum vitae, congue sit amet, diam. Nulla vel velit sit amet magna sodales laoreet. Duis euismod cursus risus. Pellentesque mattis justo ut erat. Vivamus nunc est, posuere nec, pellentesque id, viverra ac, nibh. Nam bibendum urna. Donec hendrerit augue in arcu. Proin tempor. Nam a odio in nulla porttitor eleifend.
</p>
 
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus id nibh. Etiam molestie viverra lacus. Vestibulum non enim id nisi imperdiet interdum. Aliquam porttitor, lectus et tincidunt iaculis, arcu nisi ultricies eros, eget cursus lectus eros et ligula. Quisque consectetuer urna in dolor. Aliquam erat volutpat. Maecenas elementum, leo at consequat suscipit, felis eros facilisis ligula, nec tincidunt lectus diam quis diam. Donec ac sem. Donec vestibulum augue vitae diam. Cras mauris augue, imperdiet at, feugiat quis, fringilla eu, mauris. Ut pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In a nibh ac purus imperdiet consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut ut dui ut quam tristique ultrices.
</p><p>
Proin ut augue non lectus ornare tincidunt. Nam facilisis pellentesque tortor. Vestibulum varius dui et felis. Pellentesque tempor dignissim lacus. Phasellus ac nisl non felis mattis sodales. Praesent vel orci eget mauris elementum sollicitudin. Donec non quam. Morbi ipsum eros, accumsan ut, mattis at, porttitor sed, risus. Fusce venenatis ligula sit amet elit. Donec eget ipsum. Aenean dolor. Proin eleifend arcu sed diam. Donec lobortis faucibus dui. Integer tincidunt, mi eu tristique facilisis, turpis quam dictum mi, eget convallis ipsum turpis sed dolor.
</p><p>
Etiam rutrum interdum velit. Nunc nisi quam, aliquet at, pellentesque sed, pulvinar id, mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas nec mi. Fusce non sapien. Integer lobortis urna ac justo. Maecenas condimentum, mi in venenatis placerat, nulla neque accumsan enim, sit amet viverra enim lacus vel sapien. Vestibulum purus est, pretium non, aliquet ut, imperdiet ac, nisl. Sed vestibulum vehicula nibh. Vestibulum bibendum est bibendum mauris. Nam felis lectus, euismod quis, fringilla id, euismod in, est. Morbi sollicitudin. Curabitur vel dolor.
</p><p>
Vestibulum eget felis vitae ante luctus ullamcorper. Nunc dui. Proin malesuada elementum est. Cras lectus lorem, semper et, eleifend vitae, lobortis at, lacus. Duis ornare libero ac nulla. Aliquam ac orci sed risus semper pharetra. Etiam vel justo. Vivamus dapibus tellus sed urna. Suspendisse tortor metus, ultricies adipiscing, tempus vitae, nonummy non, odio. Cras est nisl, feugiat eu, ultrices ac, auctor eget, ligula.
</p><p>
Proin pulvinar euismod magna. Curabitur justo dui, convallis at, blandit quis, laoreet id, metus. Nulla facilisi. Praesent posuere erat ac ante. Donec nulla justo, accumsan quis, porta non, molestie vel, ligula. Donec lacinia blandit pede. Donec et ante. Integer nulla mi, fringilla id, bibendum vitae, congue sit amet, diam. Nulla vel velit sit amet magna sodales laoreet. Duis euismod cursus risus. Pellentesque mattis justo ut erat. Vivamus nunc est, posuere nec, pellentesque id, viverra ac, nibh. Nam bibendum urna. Donec hendrerit augue in arcu. Proin tempor. Nam a odio in nulla porttitor eleifend.
</p>
 
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus id nibh. Etiam molestie viverra lacus. Vestibulum non enim id nisi imperdiet interdum. Aliquam porttitor, lectus et tincidunt iaculis, arcu nisi ultricies eros, eget cursus lectus eros et ligula. Quisque consectetuer urna in dolor. Aliquam erat volutpat. Maecenas elementum, leo at consequat suscipit, felis eros facilisis ligula, nec tincidunt lectus diam quis diam. Donec ac sem. Donec vestibulum augue vitae diam. Cras mauris augue, imperdiet at, feugiat quis, fringilla eu, mauris. Ut pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In a nibh ac purus imperdiet consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut ut dui ut quam tristique ultrices.
</p><p>
Proin ut augue non lectus ornare tincidunt. Nam facilisis pellentesque tortor. Vestibulum varius dui et felis. Pellentesque tempor dignissim lacus. Phasellus ac nisl non felis mattis sodales. Praesent vel orci eget mauris elementum sollicitudin. Donec non quam. Morbi ipsum eros, accumsan ut, mattis at, porttitor sed, risus. Fusce venenatis ligula sit amet elit. Donec eget ipsum. Aenean dolor. Proin eleifend arcu sed diam. Donec lobortis faucibus dui. Integer tincidunt, mi eu tristique facilisis, turpis quam dictum mi, eget convallis ipsum turpis sed dolor.
</p><p>
Etiam rutrum interdum velit. Nunc nisi quam, aliquet at, pellentesque sed, pulvinar id, mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas nec mi. Fusce non sapien. Integer lobortis urna ac justo. Maecenas condimentum, mi in venenatis placerat, nulla neque accumsan enim, sit amet viverra enim lacus vel sapien. Vestibulum purus est, pretium non, aliquet ut, imperdiet ac, nisl. Sed vestibulum vehicula nibh. Vestibulum bibendum est bibendum mauris. Nam felis lectus, euismod quis, fringilla id, euismod in, est. Morbi sollicitudin. Curabitur vel dolor.
</p><p>
Vestibulum eget felis vitae ante luctus ullamcorper. Nunc dui. Proin malesuada elementum est. Cras lectus lorem, semper et, eleifend vitae, lobortis at, lacus. Duis ornare libero ac nulla. Aliquam ac orci sed risus semper pharetra. Etiam vel justo. Vivamus dapibus tellus sed urna. Suspendisse tortor metus, ultricies adipiscing, tempus vitae, nonummy non, odio. Cras est nisl, feugiat eu, ultrices ac, auctor eget, ligula.
</p><p>
Proin pulvinar euismod magna. Curabitur justo dui, convallis at, blandit quis, laoreet id, metus. Nulla facilisi. Praesent posuere erat ac ante. Donec nulla justo, accumsan quis, porta non, molestie vel, ligula. Donec lacinia blandit pede. Donec et ante. Integer nulla mi, fringilla id, bibendum vitae, congue sit amet, diam. Nulla vel velit sit amet magna sodales laoreet. Duis euismod cursus risus. Pellentesque mattis justo ut erat. Vivamus nunc est, posuere nec, pellentesque id, viverra ac, nibh. Nam bibendum urna. Donec hendrerit augue in arcu. Proin tempor. Nam a odio in nulla porttitor eleifend.
</p>
 
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus id nibh. Etiam molestie viverra lacus. Vestibulum non enim id nisi imperdiet interdum. Aliquam porttitor, lectus et tincidunt iaculis, arcu nisi ultricies eros, eget cursus lectus eros et ligula. Quisque consectetuer urna in dolor. Aliquam erat volutpat. Maecenas elementum, leo at consequat suscipit, felis eros facilisis ligula, nec tincidunt lectus diam quis diam. Donec ac sem. Donec vestibulum augue vitae diam. Cras mauris augue, imperdiet at, feugiat quis, fringilla eu, mauris. Ut pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In a nibh ac purus imperdiet consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut ut dui ut quam tristique ultrices.
</p><p>
Proin ut augue non lectus ornare tincidunt. Nam facilisis pellentesque tortor. Vestibulum varius dui et felis. Pellentesque tempor dignissim lacus. Phasellus ac nisl non felis mattis sodales. Praesent vel orci eget mauris elementum sollicitudin. Donec non quam. Morbi ipsum eros, accumsan ut, mattis at, porttitor sed, risus. Fusce venenatis ligula sit amet elit. Donec eget ipsum. Aenean dolor. Proin eleifend arcu sed diam. Donec lobortis faucibus dui. Integer tincidunt, mi eu tristique facilisis, turpis quam dictum mi, eget convallis ipsum turpis sed dolor.
</p><p>
 
Etiam rutrum interdum velit. Nunc nisi quam, aliquet at, pellentesque sed, pulvinar id, mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas nec mi. Fusce non sapien. Integer lobortis urna ac justo. Maecenas condimentum, mi in venenatis placerat, nulla neque accumsan enim, sit amet viverra enim lacus vel sapien. Vestibulum purus est, pretium non, aliquet ut, imperdiet ac, nisl. Sed vestibulum vehicula nibh. Vestibulum bibendum est bibendum mauris. Nam felis lectus, euismod quis, fringilla id, euismod in, est. Morbi sollicitudin. Curabitur vel dolor.
</p><p>
Vestibulum eget felis vitae ante luctus ullamcorper. Nunc dui. Proin malesuada elementum est. Cras lectus lorem, semper et, eleifend vitae, lobortis at, lacus. Duis ornare libero ac nulla. Aliquam ac orci sed risus semper pharetra. Etiam vel justo. Vivamus dapibus tellus sed urna. Suspendisse tortor metus, ultricies adipiscing, tempus vitae, nonummy non, odio. Cras est nisl, feugiat eu, ultrices ac, auctor eget, ligula.
</p><p>
Proin pulvinar euismod magna. Curabitur justo dui, convallis at, blandit quis, laoreet id, metus. Nulla facilisi. Praesent posuere erat ac ante. Donec nulla justo, accumsan quis, porta non, molestie vel, ligula. Donec lacinia blandit pede. Donec et ante. Integer nulla mi, fringilla id, bibendum vitae, congue sit amet, diam. Nulla vel velit sit amet magna sodales laoreet. Duis euismod cursus risus. Pellentesque mattis justo ut erat. Vivamus nunc est, posuere nec, pellentesque id, viverra ac, nibh. Nam bibendum urna. Donec hendrerit augue in arcu. Proin tempor. Nam a odio in nulla porttitor eleifend.
</p>
 
</div>
 
<div id="lanim">
Et voila :)
</div>
 
</body>
</html>