28172 sujets

CSS et mise en forme, CSS3

[RESOLU] - Height:100% qui ne fonctionne pas

Bonjour !

Petit soucis avec mon dernier bout de code. Impossible d'avoir une page s'adaptant à la hauteur du contenu... Gênant, d'autant plus que lorsque j'enlève les derniers blocs, tout marche parfaitement.

Je suis un peu dépassé là... J'ai testé la chose sous Firefox 3 ainsi que sous IE 7.

Voici le lien : http://www.jironimo.com/leadbay/leadbay_jironimo_template_test.html.

Et voici le code incriminé :


<!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="en" lang="fr">

<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>Leadbay</title>

<style type="text/css">

html, body {
background-color:blue;
height:100%;
margin:0px;
padding:0px;
text-align:center;
}

#page {
background-color:white;
height:100%;
margin:0px auto;
padding:35px 50px 35px 50px;
width:700px;
}

#logo {
background-color:orange;
float:left;
height:60px;
margin:0px 0px 35px 0px;
width:253px;
}

#slogan {
background-color:red;
float:left;
height:33px;
margin:0px 0px 0px 20px;
width:137px;
}

#telephone {
background-color:blue;
float:right;
margin:0px;
height:44px;
width:203px;
}

#header {
background-color:green;
float:right;
height:300px;
margin:0px 0px 35px 0px;
width:700px;
}

#bloc_1 {
background-color:orange;
float:left;
height:210px;
margin:0px 35px 35px 0px;
width:210px;
}

#bloc_2 {
background-color:orange;
float:left;
height:210px;
margin:0px 0px 35px 0px;
width:210px;
}

#bloc_3 {
background-color:orange;
float:left;
height:210px;
margin:0px 0px 35px 35px;
width:210px;
}

#web {
background-color:red;
border-top:1px solid black;
float:left;
height:210px;
padding:35px 0px 0px 0px;
margin:0px 35px 35px 0px;
width:210px;
}

#contact {
background-color:red;
border-top:1px solid black;
float:left;
height:210px;
padding:35px 0px 0px 0px;
margin:0px 0px 35px 0px;
width:455px;
}

</style>

</head>

<body>

<div id="page">

<div id="logo">test</div>
<div id="slogan">test</div>
<div id="telephone">test</div>

<div id="header">test</div>

<div id="bloc_1">test</div>
<div id="bloc_2">test</div>
<div id="bloc_3">test</div>

<div id="web">test</div>
<div id="contact">test</div>

</div>

</body>

</html>


Merci d'avance !
Modifié par Forgaria (27 Oct 2008 - 15:25)
Bonjour,

Ton height: 100% fonctionne à la perfection. C'est d'ailleurs là qu'est ton problème: si tu figes la hauteur à 100% du viewport (zone de visualisation du navigateur), dès que ton contenu est plus important il dépassera.

À priori, tu devrais plutôt utiliser un min-height: 100%, et aussi:
- ne pas utiliser de padding vertical sur div#page (car il s'ajouterait à la hauteur de ce bloc);
- faire attention à la fusion des marges;
- éviter le dépassement des flottants.

Faire une recherche sur ces deux derniers concepts s'ils ne sont pas maitrisés. Smiley smile
Bonjour Florent et merci de ta réponse.

J'avais essayé avec min-height mais à moins d'avoir fait une faute de frappe, ça n'a rien changé. Mes deux blocs rouges continuent de dépasser.

Pas pensé pour les padding, je les ai enlevés.

Je ne vois pas dans, dans le cas présent, où il y a un problème avec la fusion des marges ou avec mes float : j'ai tout bien calculé (enfin, à priori non) et c'est bien ça qui m'ennuie !

Pourquoi mes blocs rouges dépassent-ils ? Je ne vois pas la logique. Mis à part que, comme tu le précises, height:100% fige la hauteur à 100% du viewport... Serait-il mieux de ne rien mettre (testé, résout le problème sous IE mais encore pire sous Firefox) ?

Merci !
J'ai rajouté : 
<div style="clear:both"></div>


Mais je ne trouve pas cette solution très gracieuse... Existe-t-il une autre façon de faire ?
Première question:
Forgaria a écrit :
Pourquoi mes blocs rouges dépassent-ils ?

Florent V. a écrit :
- éviter le dépassement des flottants.


Deuxième question:
Forgaria a écrit :
Mais je ne trouve pas cette solution très gracieuse... Existe-t-il une autre façon de faire ?

Florent V. a écrit :
Faire une recherche sur ces deux derniers concepts s'ils ne sont pas maitrisés.


Troisième question:
Forgaria a écrit :
Serait-il mieux de ne rien mettre ?

Si tu n'as pas besoin d'un bloc prenant 100% de la hauteur du viewport même quand le contenu est court, oui, autant ne pas utliser min-height.
Sujet clos
Aller à