简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Comment créer un conteneur flexible permettant un défilement vertical sans spécifier sa hauteur ?
P粉286046715
P粉286046715 2023-09-11 13:07:33
0
1
501

Dans l'extrait de code ci-dessous, je m'attends à ce que le premier et le deuxième conteneurs occupent chacun 50% de la hauteur de la fenêtre, et je veux que le premier corps du conteneur ait un débordement vertical.

Malheureusement, lorsque je mets l'énorme morceau dans le premier conteneur, il devient plus grand que 50 % de la page et le débordement automatique ne fonctionne pas.

Y a-t-il un moyen de

ne pas préciser la hauteur ? 

* {
  margin: 0;
  box-sizing: border-box;
}

.root {
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

.first-block,
.second-block {
  flex: 1;
  background-color: aqua;
  border: 1px solid gray;
  display: flex;
  flex-direction: column;
}

.first-block-header {
  height: 100px;
  background-color: yellow;
}

.first-block-footer {
  height: 100px;
  background-color: coral;
}

.first-block-body {
  flex: 1;
  overflow: auto;
  padding: 16px;
}

.first-block-content {
  height: 700px;
  width: 50px;
  background-color: purple;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Problem with overflow</title>
</head>

<body>
  <div class="root">
    <div class="first-block">
      <div class="first-block-header"></div>

      <div class="first-block-body">
        <div class="first-block-content"></div>
      </div>

      <div class="first-block-footer"></div>
    </div>

    <div class="second-block">

    </div>
  </div>
</body>

</html>

P粉286046715
P粉286046715

répondre à tous(1)
P粉391677921
P粉3916779212023-09-12 10:14:45 1 plancher

Vous devez envelopper le contenu du bloc dans un div et définir overflow-y pour qu'il défile afin que tout le contenu du bloc soit marqué pour le défilement, sinon seule la partie centrale défilera.

et ajoutez overflow-y: auto; au bloc lui-même pour le faire défiler.

Essayez ceci : 

* {
  margin: 0;
  box-sizing: border-box;
}

.root {
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

.block-content-wrapper {
  overflow-y: scroll;
}

.first-block,
.second-block {
  flex: 1;
  background-color: aqua;
  border: 1px solid gray;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.first-block-header {
  height: 100px;
  background-color: yellow;
}

.first-block-footer {
  height: 100px;
  background-color: coral;
}

.first-block-body {
  flex: 1;
  overflow: auto;
  padding: 16px;
}

.first-block-content {
  height: 700px;
  width: 50px;
  background-color: purple;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Problem with overflow</title>
</head>

<body>
  <div class="root">
    
    <div class="first-block">
    <div class="block-contant-wrapper">
      <div class="first-block-header"></div>

      <div class="first-block-body">
        <div class="first-block-content"></div>
      </div>

      <div class="first-block-footer"></div>
    </div>
      </div>

    <div class="second-block">

    </div>
  </div>
</body>

</html>
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！