28172 sujets

CSS et mise en forme, CSS3

Hauteur 100% : comment gérer le header

voici mon code actuel :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Wel'Com</title>
	<style type="text/css">
		<!--
		html, body {
			margin:0;
			padding:0;
			height: 100%;
		}		
		p {
			margin:0 0 1em 0;
		}		
		h1 {
			height: 50px;
			background-color: #4c4e00;
			color: white;
			margin:0;
		}		
		#global {
			background-color: #666600;
			height: 100%;
		}		
		#header {
			height: 10%;
		}
		#sidebar {
			float: left;
			width: 150px;
			background-color: #666600;
			color: white;
			height: 90%;
		}		
		#sidebar p {
			margin-left: 1em;
		}		
		#sidebar ul {
			margin: 0 0 1em 0;
		}		
		#sidebar li {
			list-style-type: none
			margin: 0 0 0 1em;
		}		
		#sidebar li a{
			color: white;
			text-decoration: none;
		}		
		#sidebar li a:hover {
			text-decoration: underline;
		}		
		#contenu {
			margin-left: 150px;
			background-color: #eaeae9;
			height: 90%;
		}		
		#contenu p{
			margin: 0 0 0 1em;
		}		
		#footer {
			clear: both;
			background-color: #cccc00;
			margin:0;
		}
		-->
	</style>
</head>
<body>	
	<div id="global">
		<div id="header">
			<h1>en-tête de page</h1>
		</div>
		<div id="sidebar">
			<p>Ma sidebar</p>
			<ul id="menu">
				<li><a href="#">lien1</a></li>
				<li><a href="#">lien2</a></li>
				<li><a href="#">lien3</a></li>
				<li><a href="#">lien4</a></li>
			</ul>
		</div>
		<div id="contenu">
			<p>Bloc contenu</p>
			<p>on y affichera les fiches</p>			<p>ksdjcfljsqdlkjfnlkdnfqsdljnknnfknf;qdkqnfjqfndjkdisdknsiufhidhfosduhdifhiufhsdufhisdhf</p>
		</div>		
	</div> 
</body>
</html>


J'aimerais avoir une taille fixe pour mon header et ma colonne sidebar et contenu qui prenne bien tout le reste de la hauteur sans avoir de scroll .

Y a t'il une bidouille ?
merci
Modifié par garthos (13 Nov 2008 - 15:29)
Bonjour,

Tu pourras peut-être utiliser les colonnes factices, en utilisant une image de fond sur #global (en min-height: 100% et pas height: 100%).

Mais concrètement il sera difficile de d'avoir des blocs en hauteur 100%-<hauteur du header>. La seule possibilité technique pour ça (non compatible IE6) est l'utilisation du positionnement absolu avec les propriétés top et bottom, et c'est assez limité. D'où l'idée de faire du trompe-l'oeil avec une image de fond sur le conteneur.
ok je vois c'est la merde .....

J'avais penser mettre le header en position fixe et jouer sur le padding-top pour que mon content et ma sidebar ne soit pas masquer, t'en pense quoi ?

la colonne factice ne m'arrange pas trop car en fait vais afficher un treeview dans la colonne de de gauche qui fera des appels ajax et affichera ce que je veux dans le contenu a droite donc j'aime autant garder le principe actuel ....
Modifié par garthos (13 Nov 2008 - 17:22)
Finalement après observation de quelques site (Zimbra , le webmail de free en l'occurrence...) je suis revenu sur le positionnement absolu, ceux qui me permettra par la suite d'avoir une fonction Javascript permettant de redimensionner la largeur de mes 2 colonnes via une poignée.

voici mon code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Wel'Com</title>
	<style type="text/css">
		<!--
		html, body {
			margin:0;
			padding:0;
		}		
		p {
			margin:0 0 1em 0;
		}		
		
		h1 {
			margin: 0;
		}		
		#global {
			position: absolute;
			top: 0px;
			bottom: 0px;
			left: 0px;
			right: 0px;
			background-color: #666600;
		}		
		#header {
			position: absolute;
			top: 0px;
			width: 100%;
			height: 50px;
		}		
		#warp {
			position: absolute;
			top: 50px;
			bottom: 0px;
			width: 100%;
		}		
		#sidebar {
			position: absolute;
			width: 150px;
			background-color: red;
			color: white;
			top: 50px;
			bottom: 0px;
			left: 0px;
		}		
		#sidebar p {
			margin-left: 1em;
		}		
		#sidebar ul {
			margin: 0 0 1em 0;
		}		
		#sidebar li {
			list-style-type: none;
			margin: 0 0 0 1em;
		}		
		#sidebar li a{
			color: white;
			text-decoration: none;
		}		
		#sidebar li a:hover {
			text-decoration: underline;
		}		
		#contenu {
			position: absolute;
			top: 50px;
			bottom: 0px;
			right: 0px;
			left: 0px;
			margin-left: 150px;
			background-color: #eaeae9;
		}		
		#contenu p{
			margin: 0 0 0 1em;
		}		
		-->
	</style>
</head>
<body>
	
	<div id="global">
		<div id="header">
			<h1>en-tête de page</h1>
		</div>
		<div id="wrap">		
			<div id="sidebar">
				<p>Ma sidebar</p>
				<ul id="menu">
					<li><a href="#">lien1</a></li>
					<li><a href="#">lien2</a></li>
					<li><a href="#">lien3</a></li>
					<li><a href="#">lien4</a></li>
				</ul>
			</div>
			<div id="contenu">
				<p>Bloc contenu</p>
				<p>on y affichera les fiches</p>
				<p>ksdjcfljsqdlkjfnlkdnfqsdljnknnfknf;qdkqnfjqfndjkdisdknsiufhidhfosduhdifhiufhsdufhisdhf</p>
		</div>
		</div>
		
	</div>


 
</body>
</html>


si vous avez des avis sur ma méthode je suis preneur , en tout cas ça marche dans IE et FF .... et ça s'adapte a la taille de ma fenêtre .....
Sujet clos
Aller à