28172 sujets

CSS et mise en forme, CSS3

Top fixe + contenu fluide avec ascenseur

Bonjour à tous,

avec l'XHTML strict suivant :
<!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

@+ Smiley smile
Bonjour,

Pour obtenir du positionnement fixe, utiliser position: fixed et pas autre chose.

En sachant qu'IE6 (20-25% des utilisateurs, et forcément en baisse) ne le comprendra pas, et qu'il faudra:
- soit s'en ficher royalement;
- soit dégrader le rendu en positionnement statique ou absolu.

En sachant aussi que le positionnement fixe a des limites et peut s'avérer problématique dans certains cas. Attention donc à bien tester le rendu et le comportement dans diverses situations, et notamment avec diverses résolutions d'écran.
Modifié par Florent V. (29 Sep 2008 - 14:48)
Bonjour Florent V.

merci pour ta réponse.
Avec position:fixed c'est le haut de l'ascenseur qui est caché par le #top...
J'aimerais vraiment n'avoir l'ascenseur que sur toute la hauteur du #contenu, lui même limité par le body height:100%;overflow:hidden;

Et pour info, c'est pour un futur back-office qui sera utilisé par une dizaine de personnes anti-IE Smiley lol
Modifié par Tchupacabra (29 Sep 2008 - 16:27)
j'ai essayé avec un <table > sans succès... Smiley decu 
<!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;
	}
table {
	border:2px dashed black;
	width:100%;
	height:100%;
	}
#top { border:1px dashed red;
	height:50px;
	background-color:#66CCFF;
	}
#contenu {
	overflow:scroll;
	background-color:#0099CC;
	}
</style>
</head>
<body>
	<table>
		<tr id="top"><td></td></tr>
		<tr><td><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>
		</div></td></tr>
	</table>
</body>

</html>


Toujours d'autres idées ?

Smiley bawling
Tchupacabra a écrit :
Avec position:fixed c'est le haut de l'ascenseur qui est caché par le #top...

Pas si tu utilises la barre de défilement du navigateur (donc pas de html {overflow:hidden;}), et pas une barre de défilement interne.

Si tu tiens à utiliser une barre de défilement interne plutôt que le positionnement fixe, il faut reprendre ton premier essai (au début de ce sujet). Mais plutôt que de donner une hauteur de 100% à #contenu, hauteur qui fait que les 50px du bas de #contenu vont dépasser de la zone de visualisation du navigateur (d'où la disparition du bas de la barre de défilement...), il faut utiliser le positionnement absolu:

html {overflow:hidden;} /* Pas vraiment indispensable... */
body {
	margin: 0;
	padding: 0;
}
#top {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 50px;
	background: skyblue;
}
#contenu {
	position: absolute;
	top: 50px;
	right: 0;
	bottom: 0;	
	left: 0;
	overflow: auto;
	background: pink;
}
Ainsi, tu peux même utiliser du padding sans problème pour #top et #contenu (sauf du padding vertical pour #top, ou alors il faudra diminuer la valeur de height pour garder une hauteur totale de 50px).

Avertissement: pas compatible IE6. À priori compatible IE7 et autres navigateurs modernes, mais des tests corrects sont bien sûr indispensables. Smiley cligne

Ah oui: et il y a aussi la solution frames, qui peut être intéressante pour un extranet/une interface d'administration non publique.
Sujet clos
Aller à