28182 sujets

CSS et mise en forme, CSS3

[résolu] CSS: Layer 100% avec header fix

Voila,
cela fait deja un petit moment que je cherche un moyen pour avoir une header avec hauteur en pixel et une autre layer scrollable qui rempli le reste de la page ( donc en % ). Le problème c'est que les 100% représente la taille de la fenêtre et non pas de ce qu'il reste a remplir... arrrghhhh

Voila mon code, le layer "contenu" fait donc 80%.... :

<html>
<head>
<title>Test CSS</title>
<style type="text/css">
<!--
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#header {
background-color: #99CCCC;
width: 100%;
position: absolute;
height: 90px;
margin-top: 0px;
}
#contenu {
text-align:center;
height: 80%;
width: 100%;
position: absolute;
top: 90px;
margin: 0;
padding: 0;
overflow: auto;
background-color:#9999CC;
}
-->
</style>
</head>
<body>
<div id="header"></div>
<div id="contenu">
<p>contenu</p><p>contenu</p><p>contenu</p><p>contenu</p><p>contenu</p><p>contenu</p><p>contenu</p>
<p>contenu</p><p>contenu</p><p>contenu</p><p>contenu</p><p>contenu</p><p>contenu</p><p>contenu</p>
<p>contenu</p><p>contenu</p><p>contenu</p><p>contenu</p><p>contenu</p><p>contenu</p><p>contenu</p>
</div>
</body>
</html>


J'aimerais pouvoir mettre height= 100% - (taille Header); mais ca marche pô.... Smiley bawling

Quelqu'un connait-il une solution?

Merci d'avance
Modifié le 06 Nov 2004 - 22:39
Administrateur
ponsfrilus a écrit :

J'aimerais pouvoir mettre height= 100% - (taille Header); mais ca marche pô.... Smiley bawling

Quelqu'un connait-il une solution?
Merci d'avance

En effet, ça ne fonctionne pas, ou plutôt : il n'y a pas de solution CSS qui fonctionne sur IE correctement.
Il suffirait d'utiliser à bon escient la propriété "display" associée à la valeur "table-cell", mais celle-ci n'est pas reconnue par IE.

Une solution : les tableaux.
Raphael a écrit :

Une solution : les tableaux.

Bah zut alors... ils sont vraiment incontournables
Smiley decu

Solution demi satisfaisante :
passer tes hauteurs en pixels et pas % et donner une hauteur par défaut à ta partie scrollable...
Pourquoi chercher à l'adapter à la taille de la fenêtre de l'internaute si de toute façon tu la souhaites scrollable ?
En donnant une hauteur à ta partie scrollable qui fait qu'elle occupe l'espace qui reste sur un écran 800x600 par exemple, tu contentes une moitié d'internautes (peut-être un peu moins maintenant, mais bon...).
Ben j'ai vu qu'un peu plus de internaute avait encore un écran de 800 x 600 mais un design de site avec une police lisible de cette taille commence a faire petit en 1024x768 je trouve...
Un design fluide serait la bonne solution....
Raphael a écrit :

En effet, ça ne fonctionne pas, ou plutôt : il n'y a pas de solution CSS qui fonctionne sur IE correctement.
Il suffirait d'utiliser à bon escient la propriété "display" associée à la valeur "table-cell", mais celle-ci n'est pas reconnue par IE.

Une solution : les tableaux.


comment on met un scroll dans un tableau?

Peut-on mettre un <div> dans un cellule de tableau et que celle ci prenne la taille de la cellule?
ponsfrilus a écrit :

comment on met un scroll dans un tableau?
Peut-on mettre un <div> dans un cellule de tableau et que celle ci prenne la taille de la cellule?

Je ne pense pas qu'on puisse rendre une cellule de tableau scrollable...
Quant à mettre une balise <div> dans une cellule, ça reste possible... mais pour quoi faire ? L'avantage que t'apporte le tableau est qu'il s'adapte facilement en hauteur et en largeur par rapport à la fenêtre du navigateur de ton visiteur. Pour le reste... ça semble n'être encore qu'à moitié satisfaisant pour ce que tu cherches à faire.
Tu peux essayer avec ça :

<style type="text/css">
<!--
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#header {
	text-align:center;
	width: 100%;
	background-color:#9999CC;
	position: absolute;
	height: 90px;
	margin-top: 0px;
	margin-left:-17px;
	z-index: 2;
}
#contenu {
	position:absolute;
	top:0;
	text-align:center;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: auto;
	background-color:#fff;
	z-index: 1;
}
.spacer {height:90px;background-color:#9999CC;
}
-->
</style>
</head>
<body>
<div id="header">Header fixe</div>

<div id="contenu">
<div class="spacer"></div>
<p>Content hauteur 100% </p>
<p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p>
<p>contenu</p><p>contenu</p><p>contenu</p><p>contenu</p><p>contenu</p><p>contenu</p><p>contenu</p>
<p>contenu</p><p>contenu</p><p>contenu</p><p>contenu</p><p>contenu</p><p>contenu</p><p>contenu</p>
</div>


Testé sous ie5-5.5-6, Netscape 6-7, Firefox et Opera 7 (avec les versions 6 et 5)

Eric.
Merci Eric, cette solution semble permettre un bon compromis entre ma requête et deux layers complétement fluide! Cool!
Sujet clos
Aller à