Div, hauteur qui ne varie pas avec firefox

Question

manaboko

8 Feb 2007 à 12:29

bonjour,

voici mon code css pour un div qui doit suivre la hauteur de son contenu


  #content { position:relative; margin-left:auto; margin-right:auto; min-height:570px;/*pour firefox, si le contenu est plus long que la hauteur de l'écran*/ width:100%; height:auto; background-color:#EEF3F6; }   /*redefinir pour IE*/ *html #content { width:100%; height:100%; }

et le html est :


<html> <body> <div id="content">aazazzaazazzazaza</div> </body> </html>

Mais le bug, c'est que sous Firefox, la hauteur reste à 570px pour un contenu très long alors qu'elle devrait suivre la taille du contenu, est-ce que quelqu'un pourrait m'aider?

Merci
Modifié par manaboko (08 Feb 2007 - 13:40)

Mikachu

8 Feb 2007 à 13:04

Bonjour aussi

Si tu ne fixe pas de hauteur à ton div, le contenu devrait automatiquement repousser la limité inférieure de ce div.

manaboko

8 Feb 2007 à 13:37

sans le


	height:auto;

?

cela ne marche pas

manaboko

19 Feb 2007 à 16:31

En fait , il y a un div à onglets dans #content et je crois que le problème vient de ce div à onglets. Mais je ne sais pas comment resoudre ce problème.Est-ce que vous pouvez m'aider? Merci.

Voici ma page:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Document sans nom</title>
    <link href="onglets.css" rel="stylesheet" type="text/css" />
	<style type="text/css">	
		#content {
				position:relative; 
				margin-left:auto; 
				margin-right:auto; 
				min-height:570px;/*pour firefox, si le contenu est plus long que la hauteur de l'écran*/  
				width:100%; 
				height:100%; 
				background-color:#EEF3F6; 
			}
		</style>
</head>
 
<body> 
	<div id="content">
		begin
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<div>
			<div>div ici</div>
		</div>
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
 
		<div id="onglet">
			<div id="menu">
				<a href="#" id="_0" class="current" onclick="multiClass(this.id)" alt="menu0" name="#">Champs généraux</a>
				<a href="#" id="_1" class="ghost" onclick="multiClass(this.id)" alt="menu1">Compositions du capital/Participations</a>
				<a href="#" id="_2" class="ghost" onclick="multiClass(this.id)" alt="menu2"><h6>Dirigeants</h6></a>
				<a href="#" id="_3" class="ghost" onclick="multiClass(this.id)" alt="menu3"><h6>Banques</h6></a>
			</div>
			<div id="menu_0"  class="on content">
				<table>
					<tr><td>Nature du correspondant</td><td><input name="nat_corr_2" size="81"/></td></tr>
					<tr><td>Nom</td><td><input name="nom_2" size="81"/></td></tr>
					<tr><td>Prénom</td><td><input name="prenom_2" size="81"/></td></tr>
					<tr><td>Téléphone</td><td><input name="tel_2" size="81"/></td></tr>
					<tr><td>Télécopie</td><td><input name="telecopie_2" size="81" /></td></tr>
					<tr><td>E-mail</td><td><input name="email_2" size="81" /></td></tr>
				</table>
			</div>
			<div id="menu_1"  class="off content">
				<table>
					<tr><td>Nature du correspondant</td><td><input name="nat_corr_3" size="81"/></td></tr>
					<tr><td>Nom</td><td><input name="nom_3" size="81"/></td></tr>
					<tr><td>Prénom</td><td><input name="prenom_3" size="81"/></td></tr>
					<tr><td>Téléphone</td><td><input name="tel_3" size="81"/></td></tr>
					<tr><td>Télécopie</td><td><input name="telecopie_3" size="81" /></td></tr>
					<tr><td>E-mail</td><td><input name="email_3" size="81" /></td></tr>
				</table>
			</div>
			<div id="menu_2"  class="off content">
				<table>
					<tr><td>Nature du correspondant</td><td><input name="nat_corr_2" size="81"/></td></tr>
					<tr><td>Nom</td><td><input name="nom_2" size="81"/></td></tr>
					<tr><td>Prénom</td><td><input name="prenom_2 "size="81"/></td></tr>
					<tr><td>Téléphone</td><td><input name="tel_2" size="81"/></td></tr>
					<tr><td>Télécopie</td><td><input name="telecopie_2" size="81" /></td></tr>
					<tr><td>E-mail</td><td><input name="email_2" size="81" /></td></tr>
				</table>
			</div>
			<div id="menu_3"  class="off content">
				<table>
					<tr><td>Nature du correspondant</td><td><input name="nat_corr_3" size="81"/></td></tr>
					<tr><td>Nom</td><td><input name="nom_3" size="81"/></td></tr>
					<tr><td>Prénom</td><td><input name="prenom_3" size="81"/></td></tr>
					<tr><td>Téléphone</td><td><input name="tel_3" size="81"/></td></tr>
					<tr><td>Télécopie</td><td><input name="telecopie_3" size="81" /></td></tr>
					<tr><td>E-mail</td><td><input name="email_3" size="81" /></td></tr>
				</table>
			</div>
		</div>
	</div>
</body> 
</html>

et voici onglets.css


#onglet {
	border: 0px solid gray;
	margin-left: 5px;
	margin-top:45px;
	width:98%;
}
 
#onglet a {
	text-align: center;
	display: block;
	min-width: 90px;
	width:auto;
	height: 20px;
	line-height: 20px;
	text-decoration: none;
	float: left;
	margin-left:5px;
	padding:0px;
	font-size:10px;
}
 
#onglet h6 {
	width:90px;
	padding:0px;
	margin:0px;
	font-size:10px;
}
 
#onglet a:link, #onglet a:visited, #onglet a:hover {
	text-decoration: none;
}
 
#onglet a.current {
	border-right: 1px solid gray;
	border-top:1px solid gray;
	border-bottom: 0px solid gray;
	border-left:1px solid gray;
	color:#006699;
}
 
#onglet a.ghost  {
	border-right: 1px solid gray;
	border-top:1px solid gray;
	border-bottom: 1px solid gray;
	border-left:1px solid gray;
	background-color: #CBD4F9;
	color:#006699;
}
 
#onglet .on {
	display: block;
	float:left;
	width:100%;
}
 
#onglet .off {
	display: none;
}
 
#onglet .content {/*le contenu du bloc*/
	margin-top:0px;
	margin-left:0px;
	border-right: 1px solid gray;
	border-top:1px solid #CCCCCC;
	border-bottom: 1px solid gray;
	border-left:1px solid gray;
}
 
#menu {
	margin-top:5px;
}
 
#onglet div table {
	margin-left:5px;
	margin-top:5px;
}

et la fond de couleur s'arrete au debut du div à onglets.

Merci d'avance

Sujet clos

CSS et mise en forme, CSS3

Div, hauteur qui ne varie pas avec firefox