18041 sujets

Questions générales et questions de débutants

[Résolu] Problème de taille d'un div

Bonjour,
j'ais placé juste derrière mon <body> (DOCTYPE en HTML5)
un div vide.

div.DivVisualisation
{
 display:none; position:absolute; top:0px; left:0px;
 width:100%;height:100%; background-color:#3a3a3a;
 z-index:10; opacity:0.6; filter:alpha(opacity=60);
}

Il recouvre donc toute ma page et lorsque je le rends visible il l'obscurcis, (vous connaissez cet effet classique des photothèques !) Smiley cligne
Pendant ce temps la photo apparaît en grand au dessus ,mais nous distinguons en grisé la page !

Tout marche zoom image puis hide du div etc...

Ma question, pourquoi le div est bien a 100% en largeur, mais pas en hauteur ??
Avez vous une solution à me proposer pour y remédier ?

Mille mercis d'avance.
Bonsoir,

c'est normal que ton bloc ne prenne pas 100% de la hauteur. Ici, tu lui mets un height: 100% mais 100% de quoi ? Ton élément parent occupe-t-il lui aussi 100% de la hauteur ? Regarde ici. Smiley cligne

Une petite remarque à propos du width: 100% : c'est le mal.
Merci d'avoir regardé ma question,
Tout les articles ne sont pas la bible, la preuve, comment veux-tu que ce malheureux div couvre toute ma page puisqu'il est vide ?
Tu comprends a quoi il sert j'espères ... ce div n'as pas de parent autre que le body !

<!doctype html>
<!-- etc________________ -->
<body>
<div id='DivVisualisation' class='DivVisualisation'  onclick='fermeture()'> </div>
<-- puis les autres div -->

Modifié par Christele (02 Dec 2013 - 23:48)
Regarde l'exemple que j'ai fait sur Codepen et tu verras que ma <div>, qui est vide, prend 100% de la largeur et de la hauteur de la page.

Dans ton code, si tu places ta <div> après avoir fermé le <body>, ça va poser des soucis...
Hello,

jQzz répond parfaitement à ta question (avec un lien Codepen en plus : royal !) : c'est le comportement normal de l'élément que tu observe puisque le parent de ta div (body) n'a pas de hauteur à proprement parler. La div prend 100% de la hauteur de son parent, ce qui fait 100%… de rien Smiley cligne Il suffit de donner une hauteur à ce parent et le tour est joué. As-tu vu l'exemple qu'il t'a donné et commenté la ligne de CSS de cet exemple ?

Par contre, il y a une erreur dans ton code HTML ci-dessus : la balise <body> est fermée au lieu d'être ouverte.

Quant à l'article en question, il n'a pas vocation à devenir parole d'évangile (quoique… il le pourrait), mais à souligner une mauvaise pratique… et à proposer des solutions alternatives.

edit : grillé Smiley smile
Modifié par audrasjb (02 Dec 2013 - 23:14)
Bien bien, puisque nous ne nous comprenons pas, et en plus vous êtes deux, alors
prenons le cas d'une réalitée, une mini page rigoureusement comme tu proposes.

<!DOCTYPE html>
<html lang="fr">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>CodePen - Pen</title>
<meta name="description" content="...">
</head>
<body>
<style type="text/css">
html, body {
  height: 100%; 
}

div.xx {
  height: 100%;
  background-color: #aaa;
}
</style>
<div class="xx"></div>
<div>
<br /><br />
Son grand frère passe près et lui lance d'un air malin : "si l'on baille dans un courant d'air, il paraît que l'on peut rester bloqué la bouche comme ça". 
Et il mime une grimace. Cette phrase que son frère prononce à ce moment-là se grave en lui. Elle devient une phrase en laquelle il croit. 
Il devient l'enfant courant d'air. Celui qui court plus léger que l'air. Celui qui a peur tout le temps de rester bloquer, dans une affreuse grimace. 
<br /><br />
Et voilà que sa vie se résume à ça, à cette peur là : il est dans deux sentiments en même temps, deux situations, deux extrêmes. 
Il est Romulus et Rémus. Il est Narcisse et Echo. Il est comme ça, dans l'inquiétude du vent qui s'engouffre en lui. Il est vide, comme une pièce, 
entre porte et fenêtre. C'est très bizarre comme sentiment : cette peur (angoisse?) de se figer, de rester là, parfaitement bloqué, entre passé et futur. 
<br /><br />
Les courants d'air, perpétuels, ça vous creuse un enfant ou un homme et jusqu'à la mort ça sera pareil, c'est ce qu'il se dit. 
"C'est pas grave", faut juste qu'il se dise ça de temps en temps : "c'est pas grave, je suis l'enfant courant d'air, traversé, traversant, entre porte et fenêtre, 
libre aux vents". Et seulement alors il reprend son souffle.
</div>
</body></html>


au moins le problème est alors bien mis en évidence.
cela reproduit assez bien le cas dont je parles.
Bien que ton problème soit résolu, j'aimerais quand même encore soulever quelques remarques.

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

Si tu utilises un doctype html5, ce qui est ton cas, alors ce n'est pas comme cela que l'on déclare l'encodage des caractères.

Si tu places la balise <style> en dehors de la balise <head>, alors il faut lui ajouter l'attribut scoped afin que ton code soit valide. Plus d'informations ici (attention, c'est une ébauche). De plus, en HTML5, tu n'as pas besoin de renseigner l'attribut type.

Lorsque que tu insères du texte, pense à utiliser la balise <p> qui est faite pour ça. Smiley cligne

Ton code HTML corrigé .

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>CodePen - Pen</title>
<meta name="description" content="...">
</head>
<body>
<style scoped>
html, body {
  height: 100%; 
}

div.xx {
  height: 100%;
  background-color: #aaa;
}
</style>
<div class="xx"></div>
<div>
<p>
<br /><br />
Son grand frère passe près et lui lance d'un air malin : "si l'on baille dans un courant d'air, il paraît que l'on peut rester bloqué la bouche comme ça". 
Et il mime une grimace. Cette phrase que son frère prononce à ce moment-là se grave en lui. Elle devient une phrase en laquelle il croit. 
Il devient l'enfant courant d'air. Celui qui court plus léger que l'air. Celui qui a peur tout le temps de rester bloquer, dans une affreuse grimace. 
<br /><br />
Et voilà que sa vie se résume à ça, à cette peur là : il est dans deux sentiments en même temps, deux situations, deux extrêmes. 
Il est Romulus et Rémus. Il est Narcisse et Echo. Il est comme ça, dans l'inquiétude du vent qui s'engouffre en lui. Il est vide, comme une pièce, 
entre porte et fenêtre. C'est très bizarre comme sentiment : cette peur (angoisse?) de se figer, de rester là, parfaitement bloqué, entre passé et futur. 
<br /><br />
Les courants d'air, perpétuels, ça vous creuse un enfant ou un homme et jusqu'à la mort ça sera pareil, c'est ce qu'il se dit. 
"C'est pas grave", faut juste qu'il se dise ça de temps en temps : "c'est pas grave, je suis l'enfant courant d'air, traversé, traversant, entre porte et fenêtre, 
libre aux vents". Et seulement alors il reprend son souffle.
</p>
</div>
</body></html>


Pourquoi as-tu utilisé le marqueur !important ?
Whaou super sympa ! Smiley smile
tu me demandes 

Pourquoi as-tu utilisé le marqueur !important ?

Parce que cette partie est en réalité dans le php (html) de la photothèque !
ors cet élément est appelé alors que toutes mes pages ont un include doctype;php
le quel appel le CSS général du site, le quel utilise la class='xx' non fixe.

Merci encore à toi.
Notez que l'on peut produire cet effet d'ombre sans ajout de balise html supplémentaire. Simplement en jouant sur la propriété box-shadow de la boite.

Notons aussi que !important n'est pas un hack et - s'il ne faut pas en abuser - se rèvelle très utile pour éviter la sur-sélection dans les feuilles de style.
Sujet clos
Aller à