28172 sujets

CSS et mise en forme, CSS3

Header, footer et contenu 100% hauteur avec scroll

Bonjour à tous

J'ai une question assez débile je pense, et mes neurones tournent probablement au ralenti aujourd'hui.
Ca déjà été vu 1000 fois je pense, mais je ne parviens pas à trouver de solution dans les forums.

Je cherche à avoir ca:
upload/28914-page.gif

Soit un header et un footer de hauteur fixe, toujours visible.
Et entre les deux une zone de contenu scrollable.
(la zone de contenu seulement, et pas la page entière)

La compatibilité doit être impérativement et avant tout IE6 (oui, je sais...)
Et utiliser des tables n'est pas un problème pour ce cas ici.

Mais même avec des tables, je n'y arrive pas... Smiley mur
Je crois que je régresse...
Une idée ?

Merci !
Modifié par okpoubelle (15 Apr 2010 - 11:25)
Hello,

Pourrait-on savoir ce que tu as essayé de ton côté ?

Autrement, as-tu essayé cette méthode :
html {
   height: 100%;
}
body {
   height: 100%;
}
table {
   height: 100%;
}
thead, tfoot {
   height: 70px;
}
tbody {
   height: 100%;
   overflow: auto;
}


Je ne sais pas ce que ça peut donner, je manipule que trop rarement les tableaux, mais j'espère que ça pourra t'aider, ou au moins t'orienter.
Au plaisir
Les hauteurs du header et du footer peuvent être en pourcentage ?

Si c'est possible, je vois pas où est la difficulté (par exemple pour les hauteurs, #header = 10%, #footer = 10% et #contenu = 80% avec width:100% + overflow:auto),

Si non, il faudra utiliser javascript pour calculer et donner une hauteur (en px) à #contenu = hauteur viewport - hauteur #header - hauteur #footer.
Oui comme sinon en pourcentage partout.
Mais je crois que okpoubelle souhaite une hauteur fixe pour le footer et le header.

De mémoire en fixant width à 100% pour chaque cellule d'un tableau, le calcul se fait automatiquement pour la répartition de la largeur de chacune.

Je me suis dit que pour la hauteur ça pouvait être pareil... mais à vérifier !
Dans l'idée, ta technique est très bonne Riku Asakura. Smiley smile

Mais je viens de faire quelques tests, ça ne semble pas aussi simple... Pis y a qu'à faire une recherche avec les mots-clés "table overflow" pour s'en rendre compte. Smiley langue
Modifié par BeliG (15 Apr 2010 - 12:30)
Ah ça me rassure, c'est pas si simple donc, je ne suis pas tant que ça à la ramasse...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<style type='text/css'>
			html {height: 100%;}
			body {height: 100%; padding:0; margin:0}
			table {height: 100%;width:100%;}
			thead, tfoot {height: 70px;background:#FFFFCC;}
			tbody {overflow: auto; height:100%;}
		</style>
	</head>
<body>
<div id="mainContainer">
<table>
	<thead><tr><td>header</td></tr></thead>
	<tbody><tr><td>
		contenu contenu contenu<br /><br /><br />contenu contenu contenu contenu<br />contenu contenu<br /><br />contenu<br /> 
		contenu contenu contenu<br /><br /><br />contenu contenu contenu contenu<br />contenu contenu<br /><br />contenu<br />
		contenu contenu contenu<br /><br /><br />contenu contenu contenu contenu<br />contenu contenu<br /><br />contenu<br />
	</td></tr>
	</tbody>
	<tfoot><tr><td>Footer</td></tr></tfoot>
</table>
</div>
</body>
</html>

Le height:100% attribué au tbody est en fait le 100% du viewport.
(et pareil si on applique ce 100% au td dans tbody)

Je continue à chercher...
Petite remarque, un <tfoot> se place toujours avant un <tbody> (donc après le <thead>).

Et sinon, il est impossible à ma connaissance de mettre une scrollbar sur une cellule d'un tableau. Le problème revient donc à mettre une <div> dans le <td>, sur laquelle la propriété overflow fonctionnera.

Mais cette technique revient exactement à faire ce que je t'ai proposé dans mon premier post, à savoir utiliser du javascript.

A toi de voir si tu veux conserver le <table> et toutes ses balises...
Je ne tiens pas du tout à conserver les tables, au contraire...
Mais je me disais que ça serait pouvait être une solution...
Mais même sans tables je n'y arrive pas.

La seule solution que j'ai trouvé pour l'instant en effet semble être avec du Javascript.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<script type="text/javascript">
			function resizeIt(){
				document.getElementById('contenu').style.height=document.documentElement.clientHeight-60+'px';
			}
		</script>
	</head>
<body onload="resizeIt()" onresize="resizeIt()">

	<div style="height:30px; background:#00FFCC">header</div>
	<div id="contenu" style="border:1px solid red; overflow:auto">
		contenu contenu contenu<br /><br /><br />contenu contenu contenu contenu<br />contenu contenu<br /><br />contenu<br /> 
		contenu contenu contenu<br /><br /><br />contenu contenu contenu contenu<br />contenu contenu<br /><br />contenu<br />
		contenu contenu contenu<br /><br /><br />contenu contenu contenu contenu<br />contenu contenu<br /><br />contenu<br />
	</div>
	<div style="height:30px; background:#00FFCC">footer</div>

</body>
</html>

Modifié par okpoubelle (15 Apr 2010 - 14:34)
Sujet clos
Aller à