28172 sujets

CSS et mise en forme, CSS3

Le fameux 100%. Un peu d'aide

Bonjour à tous,

Je me permets faire une petit poste car je galère actuellement sur le fameux "height :100%".
J'ai suivi le tuto qui se trouve sur AlsaCréation : http://www.alsacreations.com/astuce/lire/51-hauteur-100-element.html

Mais malheureusement ça ne marche pas.
Je débute dans l'apprentissage du CSS 3 HTML 5, je ne souhaite donc pas une que l'on me trouve la solution mais seulement un peu d'aide pour comprendre ^^.

Je souhaite que mes pages soient valide W3C, pour cela j'ai rajouté : <!doctype html>

html {
height: 100%;
}
body {
min-height:100%;
background-color:#4198f5;
margin: 0;
padding: 0;
}

#banniere {
background: url("../img/Banniere.jpg") repeat scroll 0 0 transparent;
min-width: 1024px;
width: 1024px;
height: 140px;
}

#container {
background: url("../img/fond4.jpg") repeat-y scroll 0 0 transparent;
min-width: 800px;
width: 1024px;
height: 100%;
margin-left: auto;
margin-right: auto;
padding: 0;
}

Voici mon CSS, c'est tout simple. J'ai un body à 100% qui me donne une couleur de fond, une bannière qui se positionne très bien, et une div container qui fait 1024 de large et 100% de hauteur.

Mais là problème le 100% de hauteur ne fonctionne pas, il prend juste la hauteur du texte ou du menu qui si trouve...

- A titre de test j'ai essayé de mettre le body à 50% je n'ai pas vu de changement (j’ai du mal à comprendre Smiley eek )
- Avant d'ajouter mon <!doctype html> mon code avec le 100% marchait (bon d'accord il n'était peut-être pas valide W3C mais bon Smiley biggol ).

Merci d'avance pour votre aide.
Bonjour,

Si ça peut t'aider :
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="main">
    hello www
  </div>
</body>
</html>


html{
  background:red;
  height:100%;
  margin:0;
}

body{
  height:100%;
  margin:0;
}

#main{
  background:white;
  color:black;
  height:100%;
  width:200px; /* pour centrer et donner une taille */
  margin:0 auto;/* pour centrer */
}


demo : http://jsbin.com/irogid/1/edit
min-height:100%; n'est pas une valeur héritable pour height . Un height:XX% requiert une valeur de height du parent pour calculer quelque chose, dans ton cas , il n'y a rien.
++
Sauf erreur height: 100% ne fonctionne que sur les éléments en diplay: table ou table-cell il me semble.
Un div avec height: 100% ça n'existe pas si elle est en display: block (= display par défaut des div).
Cgaybeul a écrit :
Sauf erreur height: 100% ne fonctionne que sur les éléments en diplay: table ou table-cell il me semble.
Un div avec height: 100% ça n'existe pas si elle est en display: block (= display par défaut des div).

height:XX; fonctionne avec tout les éléments qui ne sont pas en display:inline;
ou qui reçoivent un positionement fixed ou absolute,
ou que l'on met en float.
(un element en table-cell fait de facto 100% de la hauteur de son parent direct en display table ou table-row)
Le problème rencontré ici est que height:100%; d'un div dans un body qui n'a pas de height (hauteur) définie dans la feuille de style , ne donne aucune référence pour en calculer un pourcentage, XX% de 'référence inexistante' = rien du tout Smiley smile , le div prendra la hauteur de son contenu, si dans le flux ...

Cdt
Bonjour à tous,

J'ai pu régler mon soucis depuis le temps, mais je ne pense pas que j'ai utilisé la manière optimal.
Je vais me replonger dans tous ça afin de suivre vos conseils.

En tout cas merci de répondre à ce sujet, même si sa date de création "date" un peu.

Bonne journée à tous.

PS : Après une dernière re-lecture du code je clôturerais le sujet.
Sujet clos
Aller à