[CSS] Problème de hauteur

Sujet résolu

25 février 2006 à 14:45:08

Salut,

Me voilà devant une étrangeté que je n'arive pas à résoudre.
Arrivé à une certaine hauteur de page le min-height 100% n'est plus pris en compte par FF et le texte se met alors à dépasser du cadre.
j'ai un peut tout essayer mais je n'arrive pas à réglé ce problème. Si certain on une idée :

Css :

body, html
{
height: 100%;
}
body
{
margin-top: 1px;
margin-bottom:5px;
padding: 0;
background-color: #FFFFFF;
font: normal 12px "Arial";
color:#666666
}
#global
{
margin-left: auto;
margin-right: auto;
min-height:100%;
height : auto!important;
width: 603px;
border: 2px solid #999999;
background: url('images/bg.jpg') repeat-y;
}
#header
{
width: 603px;
height: 214px;
background: url('images/header.gif');
}
#contenu
{
float: left;
width: 390px;
border-right:1px dashed #5FA255;
text-align:justify;
padding-left:20px;
padding-right:16px;
padding-top:10px;
padding-bottom:10px;
}
#menu
{
float: right;
width: 161px;
padding-left:5px;
padding-right:10px;
padding-top:10px;
text-align:right;
}

La page : http://www.grunk.be/cv/

Merci pour votre eventuelle aide

jp949

25 février 2006 à 14:48:37

ne fixe pas body et html a 100% mets auto

grunk

25 février 2006 à 14:50:21

Merci de ta réponse,
Mais lorsque je fixe body à auto le cadre ne s agrandit pas sous FF comme tu peux le voir : http://www.grunk.be/cv/

jp949

25 février 2006 à 15:09:45

de quel cadre tu parles ?

grunk

25 février 2006 à 15:13:13

De celui qui est censé entouré le texte ( #global ) dans le css
Avec height à auto pour body et html sous firefox il reste sous le header et ne descend pas

jp949

25 février 2006 à 16:25:15

envoie code html

grunk

25 février 2006 à 16:29:53

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="home" href="style.css" />
<title>Cv Online et Portfolio</title>
</head>

<body>
<div id="global">
<div id="header">
</div>
<div id="contenu">
<h1>Page de contenu</h1>
<p> ..........</p>
</div>
<div id="menu">
<h1>Menu</h1>
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu1</a></li>
<li><a href="#">menu1</a></li>
<li><a href="#">menu1</a></li>
<li><a href="#">menu1</a></li>
<li><a href="#">menu1</a></li>
</ul>
</div>
</div>
</body>
</html>

grunk

26 février 2006 à 15:42:07

je me permet un petit Up car j'ai toujours pas résolu mon problème

jp949

26 février 2006 à 16:31:28

mets un clear:both; dans #global

grunk

26 février 2006 à 16:48:44

Merci pour l'idée du clear both.
J'ai en fait ajouté un footer plus ou moins imaginaire ( 1px ) auquel j'ai appliqué un clear both , et là au magie le cadre descend jusqu en bas.

Ma question est pourquoi ?

Merci à toi en tout cas

jp949

26 février 2006 à 18:21:25

C4EST EXACREMENT CE QU'IL FALLAIT FAIRE.
pourquoi ? prcque le clear annule les instructions de float ou d'absolute qui font que le cadre sort du flux et donc n'est plus influencé par les elements enfants et adjacents.
le clear permet de retablir tout ca et le remettre dans le flux