Problème de height:100%

par **djtec** » 31 oct. 2008, 17:49

Merci Berzemus cela fonctionne parfaitement.

par **yaug** » 31 oct. 2008, 11:12

Heu..
Expérience personnelle.
Après, si je me suis trompé, j'en suis désolé, mais bon.. la diplomatie..

par **Berzemus** » 31 oct. 2008, 10:48

La propriété height 100% est en général très mal interprétées par les navigateurs

J'ai une très forte envie de dire "n'importe quoi", mais je m'abstiendrai si tu trouves des sources à tes dires.

C'est juste un souci de float. Classique.

A la fin de ton #wrapper, juste avant de le fermer, insère une simple div, vide:

Code : Tout sélectionner

<div class="clear"></div>

Et après, dans le css, tu rajoutes ceci:

Code : Tout sélectionner

div.clear {
	clear:both;
	}

par **yaug** » 31 oct. 2008, 08:11

La propriété height 100% est en général très mal interprétées par les navigateurs.
Elle est donc à éviter autant que possible.

par **djtec** » 31 oct. 2008, 01:21

La j'ai vraiment pas tout compris????

par **Invité** » 29 oct. 2008, 12:06

en general ce probleme vient d element flottant à l' interieur d' un div.
Google "le concept de haslayout" et les elements flottants.

(pas trop le temps de regarder)

a+

par **djtec** » 26 oct. 2008, 13:24

Bonjour,

Après plusieurs recherche sur google et plusieurs tentative ça marche toujours pas.

Voilà la partie de mon #wrapper ne se répète pas voici un screen pour voir le problème:

Voici mon code html et css:

Code : Tout sélectionner

<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>

<style type="text/css">
body{
	background:url(img/bg.jpg) repeat;
	margin:0;
 	font-family:arial, verdana, sans-serif; 
 	font-size:11px;
	color:#000;
}

#header{
	background:url(img/header.jpg) no-repeat;
	margin-left:10.5%;
	width:1000px;
	height:233px;
}

#wrapper{
	background:url(img/wrapper.jpg) repeat-y;
	margin-left:10.5%;
    height:100%;
}

#footer{
	background:url(img/footer.jpg) no-repeat;
	margin-left:10.5%;
	width:1000px;
	height:54px;
	margin-top:-10px;
}

#registrer{
	padding-top:5px;
	padding-left:25px;
	font-size:10px;
	font-weight:bold;
	color:#fff;
}

a:link, a:visited{
	color:#fff;
	text-decoration:underline;
}

a:hover{
	text-decoration:none;
}

#menu{  
  	width:920px; 
 	height:25px; 
	padding-top:142px;
	margin-left:-20px; 
  	width:920px; 
}

#sidebar{
	display:block;
	float:left;
	margin-left:-12px; 
  	width:165px;
    height:100%;
	padding-bottom:10px;
}

#content{
	display:block;
	float:left;
	width:755px;
    height:100%;
	margin-left:60px;
	margin-top:10px;
	padding-bottom:10px;
}

#footer p{
	padding-top:25px;
	text-align:center;
	font-size:10px;
	font-weight:bold;
	color:#fff;
}	

h1{
	display:block;
	width:100%;
  	border-bottom:#2590e5 solid 1px;
	font-size:10px;
	font-weight:bold;
	text-transform:uppercase;
	color:#333;
	letter-spacing:2px;
}

h1:first-letter{
	color:#fff;
	font-size:12px;
}

.menu{
  	list-style:none;  
 	height:25px; 
  	line-height:25px;
}

.menu li{ 
  	float:left; 
  	margin-left:5px;
}

.menu li a{
  display:block; 
  float:left; 
  height:25px; 
  line-height:25px; 
  color:#fff; 
  text-decoration:none; 
  font-family:arial, verdana, sans-serif; 
  text-align:center; 
  font-size:11px;
  padding:0 0 0 7px; 
  cursor:pointer; 
  background:url(img/menu.png);
}

.menu li a b{
  float:left; 
  display:block; 
  padding:0 14px 0 7px;
  background:url(img/menu.png) no-repeat top right;
}

.menu li a:hover{
  color:#fff; 
  background: url(img/menu_h.png);
}

.menu li a:hover b{
  background:url(img/menu_h.png) no-repeat top right;
}

.navigation{
  	list-style:none;  
  	width:165px;
}

.navigation li{
	clear:both;
}

.navigation li.visiteur{
  display:block;  
  background:url(img/visiteur.jpg) no-repeat;
  width:165px;
  height:35px; 
  line-height:35px;
  border:none;
}

.navigation li.member{
  display:block;  
  background:url(img/member.jpg) no-repeat;
  width:165px;
  height:35px; 
  line-height:35px; 
  border:none;
}

.navigation li.nav{
  display:block;  
  background:url(img/navigation.jpg) no-repeat;
  width:165px;
  height:35px; 
  line-height:35px; 
  border:none;
}

.navigation li.category{
  display:block;  
  background:url(img/category.jpg) no-repeat;
  width:165px;
  height:35px; 
  line-height:35px; 
  border:none;
}

.navigation li.line {
  display:block;  
  height:14px; 
  line-height:14px; 
  color:#fff; 
  text-decoration:none; 
  font-family:arial, verdana, sans-serif;  
  font-size:10px;
  padding:2px;
  border-bottom:#2590e5 solid 1px;
  text-decoration:none; 
}

.navigation li a {
  display:block;  
  height:14px; 
  line-height:14px; 
  color:#fff; 
  text-decoration:none; 
  font-family:arial, verdana, sans-serif;  
  font-size:10px;
  padding:2px;
  border-bottom:#2590e5 solid 1px;
  text-decoration:none; 
}

.navigation li a:hover{
	background:#25a0fb;
}
</style>

<!--[if IE 7]>
<style type="text/css">
#menu{   
	padding-top:153px;
}
</style>
<![endif]-->

</head>

<body>

<div id="header">
	<div id="registrer">
    	Vous êtes ici en tant que invité.
    </div>
    
	<div id="menu">
		<ul class="menu">
			<li><a href="#"><b>lien</b></a></li>
			<li><a href="#"><b>lien</b></a></li>
			<li><a href="#"><b>lien</b></a></li>
			<li><a href="#"><b>lien</b></a></li>
			<li><a href="#"><b>lien</b></a></li>
			<li><a href="#"><b>lien</b></a></li>
		</ul>
    </div>
</div>
    
<div id="wrapper">
	<div id="sidebar">
		<ul class="navigation">
			<li class="category"></li>
			<li><a href="#"><b>lien</b></a></li>
			<li><a href="#"><b>lien</b></a></li>
		</ul>
	</div>
	
    <div id="content">
    	<h1>Lorem ipsum dolor sit amet</h1>
Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor, nisi id eleifend pharetra, velit quam tempus massa, ac lacinia quam turpis vel nunc. In erat enim, tincidunt eget. Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor.Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor.Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor...

Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor, nisi id eleifend pharetra, velit quam tempus massa, ac lacinia quam turpis vel nunc. In erat enim, tincidunt eget. Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor.Praesent dignissim, lectus pharetra blandit cursus, urna.

    	<h1>Lorem ipsum dolor sit amet</h1>
Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor, nisi id eleifend pharetra, velit quam tempus massa, ac lacinia quam turpis vel nunc. In erat enim, tincidunt eget. Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor.Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor.Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor...

Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor, nisi id eleifend pharetra, velit quam tempus massa, ac lacinia quam turpis vel nunc. In erat enim, tincidunt eget. Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor.Praesent dignissim, lectus pharetra blandit cursus, urna.

    	<h1>Lorem ipsum dolor sit amet</h1>
Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor, nisi id eleifend pharetra, velit quam tempus massa, ac lacinia quam turpis vel nunc. In erat enim, tincidunt eget. Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor.Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor.Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor...

Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor, nisi id eleifend pharetra, velit quam tempus massa, ac lacinia quam turpis vel nunc. In erat enim, tincidunt eget. Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor.Praesent dignissim, lectus pharetra blandit cursus, urna.

    	<h1>Lorem ipsum dolor sit amet</h1>
Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor, nisi id eleifend pharetra, velit quam tempus massa, ac lacinia quam turpis vel nunc. In erat enim, tincidunt eget. Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor.Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor.Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor...

Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor, nisi id eleifend pharetra, velit quam tempus massa, ac lacinia quam turpis vel nunc. In erat enim, tincidunt eget. Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor.Praesent dignissim, lectus pharetra blandit cursus, urna.

    	<h1>Lorem ipsum dolor sit amet</h1>
Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor, nisi id eleifend pharetra, velit quam tempus massa, ac lacinia quam turpis vel nunc. In erat enim, tincidunt eget. Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor.Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor.Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor...

Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor, nisi id eleifend pharetra, velit quam tempus massa, ac lacinia quam turpis vel nunc. In erat enim, tincidunt eget. Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor.Praesent dignissim, lectus pharetra blandit cursus, urna.

    	<h1>Lorem ipsum dolor sit amet</h1>
Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor, nisi id eleifend pharetra, velit quam tempus massa, ac lacinia quam turpis vel nunc. In erat enim, tincidunt eget. Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor.Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor.Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor...

Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor, nisi id eleifend pharetra, velit quam tempus massa, ac lacinia quam turpis vel nunc. In erat enim, tincidunt eget. Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor.Praesent dignissim, lectus pharetra blandit cursus, urna.

    	<h1>Lorem ipsum dolor sit amet</h1>
Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor, nisi id eleifend pharetra, velit quam tempus massa, ac lacinia quam turpis vel nunc. In erat enim, tincidunt eget. Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor.Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor.Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor...

Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor, nisi id eleifend pharetra, velit quam tempus massa, ac lacinia quam turpis vel nunc. In erat enim, tincidunt eget. Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor.Praesent dignissim, lectus pharetra blandit cursus, urna.

    	<h1>Lorem ipsum dolor sit amet</h1>
Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor, nisi id eleifend pharetra, velit quam tempus massa, ac lacinia quam turpis vel nunc. In erat enim, tincidunt eget. Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor.Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor.Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor...

Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor, nisi id eleifend pharetra, velit quam tempus massa, ac lacinia quam turpis vel nunc. In erat enim, tincidunt eget. Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor.Praesent dignissim, lectus pharetra blandit cursus, urna.

    	<h1>Lorem ipsum dolor sit amet</h1>
Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor, nisi id eleifend pharetra, velit quam tempus massa, ac lacinia quam turpis vel nunc. In erat enim, tincidunt eget. Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor.Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor.Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor...

Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor, nisi id eleifend pharetra, velit quam tempus massa, ac lacinia quam turpis vel nunc. In erat enim, tincidunt eget. Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor.Praesent dignissim, lectus pharetra blandit cursus, urna.

    	<h1>Lorem ipsum dolor sit amet</h1>
Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor, nisi id eleifend pharetra, velit quam tempus massa, ac lacinia quam turpis vel nunc. In erat enim, tincidunt eget. Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor.Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor.Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor...

Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor, nisi id eleifend pharetra, velit quam tempus massa, ac lacinia quam turpis vel nunc. In erat enim, tincidunt eget. Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor.Praesent dignissim, lectus pharetra blandit cursus, urna.

    	<h1>Lorem ipsum dolor sit amet</h1>
Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor, nisi id eleifend pharetra, velit quam tempus massa, ac lacinia quam turpis vel nunc. In erat enim, tincidunt eget. Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor.Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor.Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor...

Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor, nisi id eleifend pharetra, velit quam tempus massa, ac lacinia quam turpis vel nunc. In erat enim, tincidunt eget. Praesent dignissim, lectus pharetra blandit cursus, urna nibh sagittis nulla, et pellentesque lorem sapien vel neque. Maecenas auctor.Praesent dignissim, lectus pharetra blandit cursus, urna.

    </div>
</div>

<div id="footer">
	<p>
    	Page généré en xxxx secondes.
    </p>
</div>

</body>
</html>

Ce code ne fonctionne ni sous firefox, ni sous opéra par contre sous ie il fonctionne très bien.

Pour une fois que tout fonctionne bien sous ie, ça fonctionne pas avec le reste.

??????

Merci d'avance.

Problème de height:100%

Répondre

Étendre la vue Revue du sujet : Problème de height:100%

Problème de height:100%