Top fixe + contenu fluide avec ascenseur

**Tchupacabra** · 29/09/2008, 12h03

Bonjour à tous,

avec l'XHTML strict suivant :

Code :

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
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
* {
	padding:0px;
	margin:0px;
	}
html {
	height:100%;
	overflow:hidden;
	}
body {
	height:100%;
	}
#top {
	height:50px;
	background-color:#66CCFF;
	}
#contenu {
	overflow:auto;height:100%;
	background-color:#0099CC;
	}
</style>
</head>
<body>
    <div id="top"></div>
    <div id="contenu">
		<span style="font-size:60em;">^^</span>
	</div>
</body>
 
</html>

j'essaye d'avoir :
- le #top toujours visible et placé en haut de la page
- le #contenu étirable verticalement avec ou non l'ascenseur.

Le résultat est bon mais imparfait. En effet, le bouton bas de l'ascenseur est caché/ derrière la barre d'état du navigateur...

Connaissez-vous l'astuce pour avoir l'ascenseur en entier ?
Merci d'avance

@+

**Erwan31** · 29/09/2008, 13h58

Bonjour,
la hauteur totale de tes blocs est de 100% de la zone d'affichage + 50px, il est donc normal que les 50px du bas de ton bloc contenu soit masqué.

**Tchupacabra** · 29/09/2008, 14h16

ok, mais alors comment faire ?
Comme il n'est pas possible de faire 100%-50px. Suis-je obligé de tout gérer en % malgré la nécessité d'une hauteur fixe ? Je me serais bien passé du height:100%; du #contenu mais cela "désactive" l'ascenseur...

**Erwan31** · 29/09/2008, 15h03

Techniquement tu peux à la limite passer par un tableau de mise en forme avec 2 cellules, cela ne pose aucun problème en terme d'accessibilité ou à d'autre niveaux.
Mais je doute que masquer une partie des contenus du bloc #contenu soit profitable à l'ergonomie de la page.

**Tchupacabra** · 29/09/2008, 15h51

Envoyé par Erwan31

Techniquement tu peux à la limite passer par un tableau de mise en forme avec 2 cellules

pas bête...

Envoyé par Erwan31

Mais je doute que masquer une partie des contenus du bloc #contenu soit profitable à l'ergonomie de la page.

masquer ? non je ne souhaite rien masquer... je veux juste avoir un scroll sur toute la hauteur du #contenu et non pas sur toute la page...

**Candygirl** · 01/10/2008, 18h28

Hello,

Tu peux passer par un positionnement absolu pour ton contenu:

Code :

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

1
2
3
4
5
6
7
8
 
#contenu {
	overflow:auto;
        position:absolute;
        top:50px;bottom:0;
        width:100%;
	background-color:#0099CC;
	}

Mais un correctif sera nécessaire pour le faire fonctionner sur IE6 qui ne sait pas déterminer la hauteur à l'aide des propriétés top et bottom définies.

**Tchupacabra** · 04/10/2008, 15h29

merci Candygirl pour l'astuce avec le bottom !

en tout cas, cela semble fonctionner sous Firefox 3 et IE7 !

Code :

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
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
* {
padding:0px;
margin:0px;
}
html {
overflow:hidden;
}
#top {
border:1px dashed red;
height:50px;
background-color:#66CCFF;
}
#contenu {
overflow:auto;
position:absolute;
top:50px;
bottom:0px;
width:100%;
background-color:#0099CC;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="contenu">
<p>Lorem ipsum dolor sit amet, consectetuer adipisci elit. Efficeretur coniuncta doloribus ad consilia, quantumcumque ex admodum sententia etiam nec corporis praestabiliorem morbos, tertium studia.. Natura et consilio aut intellegunt occultarum orationis accessio has nisi, quamquam nec aut mundus vivendum, discordans paulo, phaedrum quod his tractavissent optimus sapientia.. Nihil nemini adhibenda est possunt, quae infinitum sive cum putavisset, mediocriterne ipsum in qui nec, et omnis praesentium profecto.. His priventur explicari tam si.. Dediti graecis philosophiae est esse ineruditus, explicabo ne factis tantam paria aut fecerit quarum potest, hoc ipsi regione, multa hoc sit si plura sapienter fieri, numquam quidem causa qua semper non.<p>
<p>Lorem ipsum dolor sit amet, consectetuer adipisci elit. Efficeretur coniuncta doloribus ad consilia, quantumcumque ex admodum sententia etiam nec corporis praestabiliorem morbos, tertium studia.. Natura et consilio aut intellegunt occultarum orationis accessio has nisi, quamquam nec aut mundus vivendum, discordans paulo, phaedrum quod his tractavissent optimus sapientia.. Nihil nemini adhibenda est possunt, quae infinitum sive cum putavisset, mediocriterne ipsum in qui nec, et omnis praesentium profecto.. His priventur explicari tam si.. Dediti graecis philosophiae est esse ineruditus, explicabo ne factis tantam paria aut fecerit quarum potest, hoc ipsi regione, multa hoc sit si plura sapienter fieri, numquam quidem causa qua semper non.<p>
<p>Lorem ipsum dolor sit amet, consectetuer adipisci elit. Efficeretur coniuncta doloribus ad consilia, quantumcumque ex admodum sententia etiam nec corporis praestabiliorem morbos, tertium studia.. Natura et consilio aut intellegunt occultarum orationis accessio has nisi, quamquam nec aut mundus vivendum, discordans paulo, phaedrum quod his tractavissent optimus sapientia.. Nihil nemini adhibenda est possunt, quae infinitum sive cum putavisset, mediocriterne ipsum in qui nec, et omnis praesentium profecto.. His priventur explicari tam si.. Dediti graecis philosophiae est esse ineruditus, explicabo ne factis tantam paria aut fecerit quarum potest, hoc ipsi regione, multa hoc sit si plura sapienter fieri, numquam quidem causa qua semper non.<p>
<p>Lorem ipsum dolor sit amet, consectetuer adipisci elit. Efficeretur coniuncta doloribus ad consilia, quantumcumque ex admodum sententia etiam nec corporis praestabiliorem morbos, tertium studia.. Natura et consilio aut intellegunt occultarum orationis accessio has nisi, quamquam nec aut mundus vivendum, discordans paulo, phaedrum quod his tractavissent optimus sapientia.. Nihil nemini adhibenda est possunt, quae infinitum sive cum putavisset, mediocriterne ipsum in qui nec, et omnis praesentium profecto.. His priventur explicari tam si.. Dediti graecis philosophiae est esse ineruditus, explicabo ne factis tantam paria aut fecerit quarum potest, hoc ipsi regione, multa hoc sit si plura sapienter fieri, numquam quidem causa qua semper non.<p>
<p>Lorem ipsum dolor sit amet, consectetuer adipisci elit. Efficeretur coniuncta doloribus ad consilia, quantumcumque ex admodum sententia etiam nec corporis praestabiliorem morbos, tertium studia.. Natura et consilio aut intellegunt occultarum orationis accessio has nisi, quamquam nec aut mundus vivendum, discordans paulo, phaedrum quod his tractavissent optimus sapientia.. Nihil nemini adhibenda est possunt, quae infinitum sive cum putavisset, mediocriterne ipsum in qui nec, et omnis praesentium profecto.. His priventur explicari tam si.. Dediti graecis philosophiae est esse ineruditus, explicabo ne factis tantam paria aut fecerit quarum potest, hoc ipsi regione, multa hoc sit si plura sapienter fieri, numquam quidem causa qua semper non.<p>
<p>Lorem ipsum dolor sit amet, consectetuer adipisci elit. Efficeretur coniuncta doloribus ad consilia, quantumcumque ex admodum sententia etiam nec corporis praestabiliorem morbos, tertium studia.. Natura et consilio aut intellegunt occultarum orationis accessio has nisi, quamquam nec aut mundus vivendum, discordans paulo, phaedrum quod his tractavissent optimus sapientia.. Nihil nemini adhibenda est possunt, quae infinitum sive cum putavisset, mediocriterne ipsum in qui nec, et omnis praesentium profecto.. His priventur explicari tam si.. Dediti graecis philosophiae est esse ineruditus, explicabo ne factis tantam paria aut fecerit quarum potest, hoc ipsi regione, multa hoc sit si plura sapienter fieri, numquam quidem causa qua semper non.<p>
<p>Lorem ipsum dolor sit amet, consectetuer adipisci elit. Efficeretur coniuncta doloribus ad consilia, quantumcumque ex admodum sententia etiam nec corporis praestabiliorem morbos, tertium studia.. Natura et consilio aut intellegunt occultarum orationis accessio has nisi, quamquam nec aut mundus vivendum, discordans paulo, phaedrum quod his tractavissent optimus sapientia.. Nihil nemini adhibenda est possunt, quae infinitum sive cum putavisset, mediocriterne ipsum in qui nec, et omnis praesentium profecto.. His priventur explicari tam si.. Dediti graecis philosophiae est esse ineruditus, explicabo ne factis tantam paria aut fecerit quarum potest, hoc ipsi regione, multa hoc sit si plura sapienter fieri, numquam quidem causa qua semper non.<p>
<p>Lorem ipsum dolor sit amet, consectetuer adipisci elit. Efficeretur coniuncta doloribus ad consilia, quantumcumque ex admodum sententia etiam nec corporis praestabiliorem morbos, tertium studia.. Natura et consilio aut intellegunt occultarum orationis accessio has nisi, quamquam nec aut mundus vivendum, discordans paulo, phaedrum quod his tractavissent optimus sapientia.. Nihil nemini adhibenda est possunt, quae infinitum sive cum putavisset, mediocriterne ipsum in qui nec, et omnis praesentium profecto.. His priventur explicari tam si.. Dediti graecis philosophiae est esse ineruditus, explicabo ne factis tantam paria aut fecerit quarum potest, hoc ipsi regione, multa hoc sit si plura sapienter fieri, numquam quidem causa qua semper non.<p>
<p>Lorem ipsum dolor sit amet, consectetuer adipisci elit. Efficeretur coniuncta doloribus ad consilia, quantumcumque ex admodum sententia etiam nec corporis praestabiliorem morbos, tertium studia.. Natura et consilio aut intellegunt occultarum orationis accessio has nisi, quamquam nec aut mundus vivendum, discordans paulo, phaedrum quod his tractavissent optimus sapientia.. Nihil nemini adhibenda est possunt, quae infinitum sive cum putavisset, mediocriterne ipsum in qui nec, et omnis praesentium profecto.. His priventur explicari tam si.. Dediti graecis philosophiae est esse ineruditus, explicabo ne factis tantam paria aut fecerit quarum potest, hoc ipsi regione, multa hoc sit si plura sapienter fieri, numquam quidem causa qua semper non.<p>
<p>Lorem ipsum dolor sit amet, consectetuer adipisci elit. Efficeretur coniuncta doloribus ad consilia, quantumcumque ex admodum sententia etiam nec corporis praestabiliorem morbos, tertium studia.. Natura et consilio aut intellegunt occultarum orationis accessio has nisi, quamquam nec aut mundus vivendum, discordans paulo, phaedrum quod his tractavissent optimus sapientia.. Nihil nemini adhibenda est possunt, quae infinitum sive cum putavisset, mediocriterne ipsum in qui nec, et omnis praesentium profecto.. His priventur explicari tam si.. Dediti graecis philosophiae est esse ineruditus, explicabo ne factis tantam paria aut fecerit quarum potest, hoc ipsi regione, multa hoc sit si plura sapienter fieri, numquam quidem causa qua semper non.<p>
</div>
</body>
</html>

@+

**Erwan31** · 04/10/2008, 20h00

Envoyé par Candygirl

Mais un correctif sera nécessaire pour le faire fonctionner sur IE6 qui ne sait pas déterminer la hauteur à l'aide des propriétés top et bottom définies.

Salut CandyGirl,
J'ai encore jamais utilisé ce cas de figure. Connais tu un correctif pour IE6?

Top fixe + contenu fluide avec ascenseur

CSS

Discussions similaires

Partager

Partager