Discussion :

[olivier252]

Bonjour,

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



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

[NoSmoking]

Bonjour,

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.

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

alors là ????

[olivier252]

J'aurai dû écrire

Code :

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

1
2
 
calc()

Du coup j'ai essayé d'appliquer un

Code :

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

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 :

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

overflow-y: scroll

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

[Doksuri]

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

Code html :

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

1
2
3
<div id="header">header</div>
  <div id="main">main</div>
  <div id="footer">footer</div>

Code css :

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

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; }

[olivier252]

Merci beaucoup, je vais tester