web-dev-qa-db-fra.com

comment définir la hauteur du conteneur DIV sur 100% de la hauteur de la fenêtre?

J'ai quelques problèmes avec mon conteneur DIV. D'une part, il ne reconnaît pas correctement la hauteur de mon contenu (j'aurais pensé qu'il s'étendrait au-delà du bas du contenu principal et de la barre latérale, mais ce n'est pas le cas). Vous pouvez voir ce que je veux dire sur cette page .

Je voudrais aussi que le conteneur DIV remplisse toujours la hauteur disponible de l'écran/fenêtre. J'ai essayé de le régler sur min-height:100%, mais cela n'a eu aucun effet.

Voici le CSS que j'utilise pour le conteneur DIV:

#container {
  padding: 0;
  margin: 0;
  background-color: #292929;
  width: 1200px;
  margin: 0 auto;
  min-height: 100%;
}

Je serais reconnaissant pour toute aide pour que cela fonctionne.

Merci,

Entaille

heightcss
21
Nick

Ajoutez ceci à votre css:

html, body {
    height:100%;
}

Si vous dites hauteur: 100%, vous voulez dire «100% de l'élément parent». Si l'élément parent n'a pas de hauteur spécifiée, rien ne se passera. Vous ne définissez que 100% sur le corps, mais vous devez également l'ajouter au code HTML.

48
ptriek

Avez-vous défini le CSS:

html, body
{
    height: 100%;
}

Vous en avez besoin pour que la division prenne toute la place. :)

7
Kyle

Vous pouvez le configurer pour voir la hauteur

html, body
{
    height: 100vh;
}
5
Nicky Thomas
html {
  min-height: 100%;
}

body {
  min-height: 100vh;
}

La html height (%) s'occupera de la hauteur des documents dont la height est plus qu'un 100% du screen view tandis que la body view height (vh) prendra en charge la hauteur du document qui est inférieure à la hauteur de la vue à l'écran.

4
Blix

J'ai réfléchi à cela et expérimenté avec la hauteur des éléments: html, body et div. Finalement, j'ai trouvé le code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Height question</title>
<style>
	html {height: 50%; border: solid red 3px; }
	body {height: 70vh; border: solid green 3px; padding: 12pt; }
	div {height: 90vh; border: solid blue 3px; padding: 24pt; }
	
</style>
</head>
<body>

	<div id="container">
		<p>&lt;html&gt; is red</p>
		<p>&lt;body&gt; is green</p>
		<p>&lt;div&gt; is blue</p>
	</div>

</body>
</html>

Avec mon navigateur (Firefox 65 @ mint 64), les trois éléments sont de 1) hauteur différente, 2) chacun est plus long que le précédent (html 50%, corps 70vh et div 90vh). J'ai également vérifié les styles sans la hauteur par rapport aux balises html et body. A bien fonctionné, aussi.

À propos des unités CSS: w3schools: unités CSS

Une note sur la fenêtre: "Fenêtre = la taille de la fenêtre du navigateur. Si la fenêtre a une largeur de 50 cm, 1vw = 0,5 cm."

0
khaz