28172 sujets

CSS et mise en forme, CSS3

Min-height sur hauteur de la page

Bonjour à tous !

je suis confronté au cas de figure suivant :
dans le cadre d'un framework assez figé (donc peu de possibilité de modifier le markup html), j'essaie d'obtenir ceci :
<html>
	<body>
		<div id="page">
			<div id="header"></div>
			<div id="contenu"></div>
			<div id="footer"></div>
		</div>
	</body>
</html>

avec :
#header et #footer n'ont pas nécessairement une hauteur fixée.
#contenu doit prendre la hauteur du viewport restante

j'ai bien sûr mis html et body en height:100%,
et #page en min-height:100%

Question donc : comment faire pour que #contenu occupe toute la hauteur disponible ?
Soit : [hauteur du viewport] - ( [hauteur header]+[hauteur footer] )

Car si je mets height:100% sur #page ET #contenu, ce dernier dépasse de la hauteur du viewport d'autant que la somme des hauteurs header+footer.

Merci beaucoup !
Bonjour,

Peut être une piste (qui risque d'être compliqué à géré avec du contenu, à voir ce que tu veux en faire exactement) :

<style type="text/css">
html, body, #page { height:100%; margin:0; padding:0;}
#header { height:20%; max-height:20%; background-color:#0C3;}
#contenu { height:70%; max-height:70%; background-color:#960;}
#footer { height:10%; max-height:10%; background-color:#00F;}
</style>



<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>...</title>
</head>
<body>
		<div id="page">
			<div id="header"></div>

			<div id="contenu"></div>

			<div id="footer"></div>
		</div>
</body>
</html>


Smiley cligne
Modifié par Spacedementia (29 Feb 2012 - 22:01)
Merci, j'y ai pensé, mais le header et le footer ne peuvent pas avoir une hauteur variable.
Reste le javascript, mais bon...
Non kaelig,
Pas de problème pour mettre un footer en bas de page.
Le souci est de faire en sorte que le contenu central occupe toute la hauteur disponible du viewport.
Oui c'est bien ça.

À l'aide de l'inspecteur ou firebug, mets un background sur le .wrapper dans l'exemple que j'ai lié précédemment et tu verras que le contenu s'étend sur toute la hauteur disponible.
html, body {
	height: 100%;
}

#table {
	height: 100%;
	display: table;
}

#haut, #milieu, #bas {
	display: table-row;
}

#haut { height: 10%; }
#bas { height: 10%; }



<div id="table">

<div id="haut">
	<header></header>
</div>

<div id="milieu">
	<p>Contenu</p>
</div>

<div id="bas">
	<footer></footer>
</div>

</div>


Je n'applique pas directement les propriétés aux balises header ou footer car sinon c'est un peu chiant de gérer le contenu dans une cellule de tableau.
@Kaelig, le wrapper, oui, mais impossible d'affecter une hauteur de 100% (restante) à un élément dedans, ce qui est mon problème d'origine.

@nonoteam : pas bête, pas bête ! Ma structure html est bien plus complexe, je vais voir si ça peut fonctionner (il va falloir que j'affecte le style display:table sur les enfants, il faut que j'investigue sur les pages de l'appli si çà ne casse pas tout) (miam miam IE8...)
Salut à tous,

Juste une petite précision, si tu as besoin d'une compatibilité inférieure à IE8 tu peux oublier "display:table" car ce n'est pas compatible et utiliser un vrai tableau (ce qui n'est pas forcément catastrophique).

Effectivement la logique à nonoteam fonctionne (je l'ai testé avec un vrai tableau, j'arrive à fixer les hauteurs de #haut et #bas et le #milieu s'adapte) mais comme tu as dit que tu souhaitait un #haut et #bas de hauteur fixe à la place de "10%" tu mets une valeur en pixel. Smiley cligne
bonsoir,

la piste display:table est bonne.

La particularité d'un formatage comme un tableau est que celui-ci se redimensionne selon son contenu , quelque soit la hauteur (ou largeur) indiquée.
<html>
	<body>
		<div id="page">
			<div id="header"></div>
			<div id="contenu"></div>
			<div id="footer"></div>
		</div>
	</body>
</html>

En pratique cela donne pour le style (qui remplie une page vide, mais qui laisse celle-ci s'etendre tant en hauteur que largeur si le contenu l'impose, comme un tableau html):
html , body, #page {height:100%;width:100%;border-spacing:0;margin:0;padding:0;}
#page {display:table;}
#header, #contenu, #footer {display:table-row;}
#header, #footer {height:1.2em;} /* contenu s'étale sur le reste dispo */


Valable pour IE8 et + , pour IE7 et moins , voir CC et expression() ou js si vraiment utile.

Cordialement, gc
Bonsoir,

@gc-nomade : Une question me turlupine ^^, qu'est ce que tu appelle "CC et expression()" ?
Cette abréviation ne me dit rien...
Merci Smiley cligne
bonjour,

oups, je parle de vielles techniques qui ponctuellement restent efficaces et ne risque pas de perturber nos navigateurs actuels si l'on veut quand même inclure IE7

expression, pour IE5-7 , une façon d'injecter du javascript directement dans une feuille de style Smiley smile
infos sur msdn : http://msdn.microsoft.com/en-us/library/ms537634%28v=vs.85%29.aspx

qui donnerait simplement pour #contenu un truc du genre (pour ie7 et moins et IE8 en mode IE7 ou quirk) :
#contenu {
min-height: expression(document.body.clientHeight - document.getElementById('header').offsetHeight - getElementById('footer').offsetHeight)


Et CC pour commentaire conditionnel, qui permet de ciblé une ou plusieurs de version de IE en y injectant du html ou un simple contenu texte

http://msdn.microsoft.com/en-us/library/ms537512%28v=VS.85%29.aspx

A utiliser en connaissance de cause et faire en sorte de laisser un commentaire aux copains qui passeront derrière )

Cordialement, GC
Salut,

Merci pour tes explications, les expressions m'étaient inconnus. Par contre les commentaires conditionnels ça je connais ^^. J'ai pas fais le rapprochement tout de suite entre CC et commentaires conditionnels...

A bientôt ! Smiley cligne
Sujet clos
Aller à