28172 sujets

CSS et mise en forme, CSS3

[à supprimer] Association "hauteur div 100%" et margin négat

salut les gens.

Après consultation de ce post, j'ai pu créer un div avec une taille ajustée à la hauteur de ma fenêtre, même si son contenu ne le remplit pas.

-----------
| | -> entete
-----------
| |
| | -> corps
| |
| |
-----------

Le problème est que si je commence à ajouter dans mon contenu des éléments avec des paddings et margins négatifs (ex: p, ul, li), mon bloc soustrait une certaine valeur à sa hauteur de 100% et génère ainsi un espace non désiré en bas de page.
Mon explication n'étant pas limpide, l'exemple de code suivant vous aidera à mieux saisir où est le hic.

Une solution, une idée ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="fr-ca" xml:lang="fr-ca" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>test min-height</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta http-equiv="content-style-type" content="text/css" />
  <style type="text/css" media="all">

* {padding: 0; margin: 0;}
html, body { 
   height: 100%; 
   background:#000000;
}
div#entete { 
   background: #999999; 
   height: 100px; 
}
div#corps { 
   background: #efefef; 
   height: auto !important; 
   height: 100%; 
   min-height: 100%; 
}
div#corps p { 
   background: #999933; 
   margin: 0 0 -10px 0;
}
  </style>
</head>

<body>
<div id="corps">

<div id="entete"><h1>titre</h1></div>

<p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p><p>blabla</p>
</div>

</body>
</html>


merci d'avance !
Modifié par denisgrugeon (08 Apr 2008 - 23:54)
Modérateur
bonsoir

peut-etre confond tu les couleurs de fonds que tu applique , ta page ne retrecie pas , seule l'espace occupé par les paragraphes est reduit.
#corps : couleur de fond :#efefef
<p></p> : couleur de fond : #999933

tout est normal , sauf que si tu conserve cette façon d'afficher tes textes , ce sera totalement illisible.

GC
Modifié par gcyrillus (08 Apr 2008 - 00:25)
En effet...
Je vais reprendre mon code ce soir pour refaire mon exemple...
Modifié par denisgrugeon (08 Apr 2008 - 09:46)
Après révision de mon code, je constate que mon exemple n'était pas du tout le bon (avec mes excuses).
Et par ailleurs, j'ai trouvé une solution à mon problème sur le cas que je n'avais pas détaillé ici (j'avais en fait un mauvais héritage de positions).

Donc pas besoin de reprendre la recherche, à moins que, "pour la postérité", quelqu'un me demande de remettre les choses à plat.

Bref, ami modérateur, tu peux effacer cette discussion du forum.
Sujet clos
Aller à