Bonjour,

Je n'arrive pas à étirer un sous-menu (sous "ul" avec la class "ul-2" en jaune) jusqu'en bas de page.

Impossible d'utiliser flexbox dans mon cas pour étirer.

Voici mon code :

https://codepen.io/furyfatal/pen/PrvEae

J'ai tout essayé : height : 100%, 100vh, calc ()...

Merci à ceux qui pourront me trouver une solution.

-
Edité par Terry-Bogard 14 juillet 2019 à 15:01:02

Salut,

D'à ce que je vois, le problème viens du fait que ton "ul-1" à seulement une hauteur de 100px, et puisque que le "ul-2" est dedans, bah tu peux pas l'étirer jusqu'en bas...

Bonne journée

C'est possible, puisque c'est un exercice.

Ca marche avec des valeurs statiques comme height:1200px ou 100vh (comme j'ai fait), mais c'est du bricolage.

Tu as la solution du display flex avec les enfants en flex 1 mais cela te demande de restructurer ton html

sinon le moyen le plus simple reste à mettre tes menus en position fixed ce qui rend d'ailleurs l'interface beaucoup plus user friendly dans le cas d'une interface d'administration.

.main {
  margin-top: 130px;
}

header {
  position: fixed;
  right: 0;
  left: 0
  top: 0
}

Bonjour Terry-Bogard ,

Les ul-2 doivent être obligatoirement dans le ul-1 ou ont peu les sortir et les mettre dans main ?