Utilite de height en css

**labarre2002** · 04/01/2024, 20h41

Bonsoir

Sur un discord anglais sur lequel je poste souvent quelques codepen il m'est souvent reproché de faire usage de height: 100vh; dans l'élément body, je me pose la question.
Si il n'est pas utile de faire cette déclaration pourquoi quand je commente l'élément height dans le body la div bleu n'est plus au centre

https://codepen.io/alpha_66/pen/KKEVeQK?editors=1100

d'aucun m'exhorte a faire usage de min-height dans le body en lieu et place de height.

Merci d avance pour les éventuelles réponses

**unanonyme** · 05/01/2024, 12h17

Bonjour,

est ce que cet exemple vous parle ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
	<body>
		<div>
			toto
		</div>
	</body>
	</html>
 
	<style>
                html{
                        background-color: red;
                }
                body{
                        height: 100vh;
                        /* min-height: 100vh; */
                        margin:0;
                        background-color: blue;
                }
                div{
                        height: 1300px;
                }
        </style>

Sinon, un peu de lecture sur les notions de viewport / viewlayout / units

https://developer.mozilla.org/fr/doc...wport_concepts
https://developer.mozilla.org/fr/doc...gueur_relative

Définir la propriété body{height: 100vh} prévient l'agrandissement de celui ci à suivre la hauteur du viewlayout (!=viewport).

Quand vous définissez une min-height vous donnez la possibilité au moteur de rendu d'agrandir la hauteur du bloc autant que nécessaire.

Bonne journée.

Utilite de height en css

CSS

Vue hybride

Discussions similaires

Partager

Partager