Vous trouverez ci-dessous une reproduction du problème avec lequel je lutte.

Démo: https://jsfiddle.net/5n4Lhgbt/

Comme vous pouvez le voir, le div section est un peu plus élevé que le 100vh (la hauteur de la barre de navigation a été ajoutée et la barre de défilement apparaît). Je veux l'éviter. La situation dont je parle est clairement montrée dans l'image ci-dessous:

enter image description here

Quelques informations:

  • la hauteur de la barre de navigation est dynamique - elle pourrait être plus élevée, dépend du logo à l'intérieur,
  • l'utilisation du overflow: hidden sur le conteneur de section ne me satisfait pas,

J'apprécie toute aide.

1
Sebastian Wędzel 30 nov. 2020 à 18:38

2 réponses

Meilleure réponse

Il vous suffit d'ajouter à votre #section:

  flex: 1;
  overflow: auto;

Et cela ferait l'affaire: JSFIDDLE

2
Alvaro Menéndez 30 nov. 2020 à 15:47

Remplacez votre #section css par ceci:

#section {
  width: 100%;
  height: calc(100% - 3.25rem);
  background-color: green;
}

Cela soustrayera la hauteur de la barre de navigation de la section et la rendra égale à l'espace restant.

0
Mudasir Zahoor 30 nov. 2020 à 16:37