28198 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de hauteur

Salut

j'ai la page suivante :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Page test</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-15">
<meta http-equiv="Content-Language" content="fr">
<link rel="stylesheet" type="text/css" href="css/screen.css" media="screen" title="Normal">
</head>
<body>
<div id="conteneur">
	<div id="header"></div>
	<div id="contenu">
	<p>Texte plus ou moins long</p>
	</div>
	<div id="menu">
	<ul>
		<li><a href="" title="">lien 1</a></li>
		<li><a href="" title="">lien 2</a></li>
	</ul>
	</div>
</div>
</body>
</html>


le fichier css suivant


body{
	margin:0;
	padding:0;
} 

#conteneur {
	position:absolute;
	width:780px;
	top:0;
	left:50%;
	bottom:0;
	margin-left:-390px;
	border:1px solid red;
}

#header {
	margin-left:5px;
	width:770px;
	height:149px;
	border:1px solid blue;
}

#contenu {
	margin-left: 250px;
	margin-right: 20px;
	border:1px solid green;
}

#menu {
	position:absolute;
	top: 150px;
	left: 30px;
	width: 180px;
	border:1px solid yellow;
}


Je voudrais que, si le texte est trop court que le div #conteneur ait la hauteur de la page et dans le cas contraire que le div s'allonge.

J'ai pensé ajouter bottom:0; dans le #conteneur. Pour ce qui est du cas du texte court ça fonctionne mais pour le texte long ça ne fonctionne qu'avec Konqueror
Modifié par JuTs (13 Apr 2006 - 11:05)
Bonjour,

Tu ne peux pas déclarer à la fois : top=0 et bottom=0 pour définir une position absolue. C'est soit l'un, soit l'autre.

Si tu lèves bottom=0, cela marche dans le cas N°2, d'ailleurs.

Si tu veux que ton conteneur occupe toute la hauteur :


#conteneur {
       [b]
        height: auto !important;
	height: 100%;
	min-height:100%;[/b]

	position:absolute;
	width:780px;
	top:0;
	left:50%;
	margin-left:-390px;
	border:1px solid red;
}

Modifié par Vero (14 Mar 2006 - 23:38)
En fait, il faut juste chercher à comprendre comment ça marche. Ce qui peut mener loin ... et ce n'est pas toujours simple !

Smiley biggrin

Mais si tu rajoutes un petit [Résolu] dans le titre, tu rendras bien service au forum à ton tour ...
Smiley cligne
Sujet clos
Aller à