Div à 100% du vertical visible

**Danyel** · 15/04/2024, 20h58

Salut all,
Je cherche a afficher un/une div à 100% du vertical visible du screen.
J'utilise pour cela : min-height: 100vh;
Mais comme il y a un header et un footer (qui peuvent etre de hauteur variable) la hauteur du div est superieure de la hauteur du dit header et footer (plutot logique)
J'aimerai savoir s'il est possible d'avoir juste la valeur du vertical visible ?
Je pense qu'un calc() doit est possible pour calculer un (100vh - (hauteur du header + hauteur du footer)) mais je n'ai pas l'info.
Si qq a la solution ou une piste.
Merci par avance.

**NoSmoking** · 16/04/2024, 16h18

Bonjour,
une des solutions est le passage à un modèle GRID, FLEXBOX marcherait également, exemple simple de mise en place :

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Modèle GRID simple</title>
<style>
html, body {
  margin: 0;
  padding: 0;
}
body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}
header {
  background-color: #DEF;
}
main {
  background-color: #EFD;
  overflow: auto;
}
footer {
  background-color: #FDE;
}
</style>
</head>
<body>
<header>
  <h1>Header</h1>
</header>
<main>
  <p>Contenu de la page...</p>
</main>
<footer>
  <p>Footer</p>
</footer>
</body>
</html>

**Danyel** · 16/04/2024, 19h24

Merci NoSmoking, je vais etudier cela

**Danyel** · 17/04/2024, 21h47

Envoyé par NoSmoking

GRID - FLEX

NoSmoking, selon toi quel est celui que l'on doit utiliser (que ce soit pour sa puissance ou ses fonctionnalites) ?

**mathieu** · 18/04/2024, 09h46

flex gère plutot des affichages linéaires (avec éventuellement des retours à la ligne ou colonne) :
https://developer.mozilla.org/fr/doc...ble_Box_Layout
et grid organise un affichage sous forme de grille :
https://developer.mozilla.org/fr/doc...SS_Grid_Layout

**NoSmoking** · 18/04/2024, 11h07

Je rajoute à cela : Le modèle de grille et les autres modèles de disposition.

Div à 100% du vertical visible

CSS

Discussions similaires

Partager

Partager