web-dev-qa-db-fra.com

Un div vide (avec style: height) ne s'affichera pas

Incroyablement simple morceau de HTML - mais ne affichant pas ce à quoi je m'attendais. 

J'essaie de créer un div vide qui affiche un espace en haut de la page, avec style="height: 400px;"

Même si j'ai spécifié une hauteur, mon div vide ne s'affichera pas. Qu'est-ce que j'oublie ici? 

UPDATE: ma question principale est: Pourquoi une div vide ne s'affiche pas même si elle a une hauteur définie? Ou, quelles sont les règles de base style nécessaires pour afficher un div vide?

Code complet:

<html>
<head><title>Site Name</title>
</head>
<body>
<div style="height:400px; width:100%; margin:0; padding:0; position:absolute;"></div>
<div style="width: 50%; margin: auto;">
<img src="logo.gif"></div> 

<div style="width: 50%; margin: auto;"></div>

</body>
</html>
csshtml5css3html
14
azochz

Si vous voulez juste ajouter des espaces, essayez ceci

<div style="height:400px; width:100%; clear:both;"></div>

VIOLON

ou vous pouvez simplement ajouter un rembourrage au corps comme body { padding-top: 400px; }

16
mdesdev

Le style CSS que vous recherchez est min-height: 20px; Par défaut, une div sans contenu aura une hauteur de 0 en raison du paramètre automatique défini par défaut qui se redimensionne lui-même pour s'adapter au contenu.

 enter image description here

 enter image description here

6
Dmitri Larionov

Vous devez ajouter un arrière-plan pour que vous puissiez voir la case blanche.

background-color:black;

Vous ne pourrez pas le voir.

3
Shaun

La raison pour laquelle il ne s'est pas affiché est que vous avez eu position:absolute dans votre style. Cela signifie que div sera positionné indépendamment des autres éléments et n'aura aucun effet sur la div qui suit. Donc, votre seconde div est essentiellement la première div à l'écran.

0
broc.seib