Div à 100% du vertical visible

Version imprimable

15/04/2024, 20h58
Danyel

Div à 100% du vertical visible

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.

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

Code:

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>

16/04/2024, 19h24
Danyel

Merci NoSmoking, je vais etudier cela ;)
17/04/2024, 21h47
Danyel

Citation:

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) ?
18/04/2024, 09h46
mathieu

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
18/04/2024, 11h07
NoSmoking

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