28172 sujets

CSS et mise en forme, CSS3

[Résolu] Div hauteur restante 100% avec scrollbar

Bonjour,

Voici le fiddle : https://jsfiddle.net/qk3zdLt6/

Je souhaiterais faire ceci en flex :
* avoir mon div background jaune occuper toute la hauteur disponible restante du viewport (et donc sa hauteur variera dynamiquement selon la taille du viewport)
* avoir sur ce même div "jaune" une scrollbar verticale (overflow-y: auto) lorsque le contenu déborde
* et donc, aucune scrollbar sur le document html, sur le body ou sur l'élément main

Infos complémentaires :
* j'ai simplifié le code au strict minimum afin de ne pas le polluer inutilement
* la hauteur du div mauve ne sera jamais fixe, mais celle du h1 peut l'être
* éventuellement l'une ou l'autre piste pour solution en flex (display: flex; flex-direction: column; + éventuellement sur les div flex: 0 1 auto; pour le premier et flex: 1 1 auto; pour le second)

Merci d'avance à la communauté!
Modifié par Alphonse (12 Feb 2021 - 13:45)
Modérateur
Salut !

Alphonse a écrit :
* éventuellement l'une ou l'autre piste pour solution en flex (display: flex; flex-direction: column; + éventuellement sur les div flex: 0 1 auto; pour le premier et flex: 1 1 auto; pour le second)


Et bien tout comme tu l'as dit ! Tu n'es pas allé au bout ? Il te manquait peut être le height:100%; sur le html et body pour que ca marche.
html {
  margin:0;
  padding:0;
  height:100%;
}
body {
  background-color: lightblue;
  padding: 0;
  margin: 0;
  height:100%;
}

main {
  height:100%;
  display: flex;
  background-color: #999;
  flex-direction: column;
}

h1 {
  flex: 0 0;
  text-align: center;
}

.fixed {
  flex: 0 0;
  background: #c0c;
}
.scrolled {
  flex: 1 1;
  background: #cc0;
  overflow: auto;
}

https://jsfiddle.net/undless/owqrjL7c/
Meilleure solution
Oh bien vu!
Je pense que je me suis embrouillé avec les height: 100% pas mis aux bons endroits.
De ce que je me souviens de mes tests, je l'avais mis soit sur le html, soit sur le body, mais pas sur les 2... XD
Merci Smiley smile
Sujet clos
Aller à