Utiliser la fonction calc()

Bonjour,

J'ai une mise en page à faire qui ressemble à ceci sur mobile :

Pièce jointe 600344

Je veux fixer l'élément 1 au top et le 3 au bottom. Mon soucis est que mon boss ne veut pas que j'utilise du positionnement relatif pour fixer les éléments et il préfère que j'(utilise calc)

Je galère car il y a un élément qui apparait de manière dynamique avec un clic utilisateur et qui aura potentiellement une taille variable, c'est pourquoi j'aurais besoin d'une scrollbr (un overflow-y)

merci pour votre aide

Bonjour,

Citation:

---

Je veux fixer l'élément 1 au top et le 3 au bottom. Mon soucis est que mon boss ne veut pas que j'utilise du positionnement relatif

---

sur ce coup il a raison, il existe les modèles flex ou grid pour faire cela proprement.

Citation:

---

et il préfère que j'(utilise calc)

---

alors là ????

J'aurai dû écrire

Code:

---

1 2

calc()

---

Du coup j'ai essayé d'appliquer un

Code:

---

calc(100vh - hauteur élement 1 et élément 3)

---

sur le layout tout en attribuant des hauteurs fixes sur les css des éléments 1 et 3, j'ai également ajouté un

Code:

---

overflow-y: scroll

---

sur l'élément 2 mais visiblement cela ne fonctionne pas.

comme precise : pas besoin de calculs savant...(html a mettre directement dans le body)

Code:

---

1 2 3

<div id="header">header</div> <div id="main">main</div> <div id="footer">footer</div>

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11

body { display: grid; grid-template-rows: 50px minmax(100px, 1fr) 50px; height: 100vh; margin: 0; padding: 0; } div { width: 100vw; } #header { background-color: yellowgreen; } #main { background-color: indianred; } #footer { background-color: lightskyblue; }

---

Merci beaucoup, je vais tester