J'ai un modal centré horizontalement et verticalement où le contenu du corps défile lorsqu'il est grand.

Cependant, lorsque le contenu du corps est inférieur à la hauteur modale, le modal ne se redimensionne pas jusqu'à son contenu.

J'ai essayé d'utiliser uniquement la hauteur maximale et non la hauteur, mais mon code modal s'interrompt ...

Remarque : Exécutez le code en pleine page pour voir l'espace vide sous le contenu du corps

.cover {
  background-color: rgba(0, 0, 0, 0.4);
  bottom: 0;
  height: 100%;
  left: 0;
  padding: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 200;
}

.modal {
  background-color: white;
  margin: 10% auto;
  max-width: 400px;
  height: 60vh;
  max-height: 60vh;
  position: relative !important;
}

.scrollView {
  position: relative;
  border: 2px solid red;
  height: calc(60vh - 100px);
  margin: 50px 0;
  top: 50px;
  overflow: scroll;
  z-index: 800;
}

div.header {
  display: flex;
  align-items: center;
  height: 50px;
  max-height: 50px;
  top: 0;
  position: absolute;
  background: lightgreen;
  width: 100%;
  z-index: 900;
  justify-content: space-between;
}

.header div {
  padding: 0 20px;
}

div.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  height: 50px;
  background: orange;
  width: 100%;
}

.body {
  overflow-y: scroll;
}
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor aliquet orci sit amet fringilla. Duis a ligula consequat, ornare elit eu, tincidunt turpis.
</p>
<p>Nulla faucibus ultrices est eu laoreet. Suspendisse accumsan blandit ipsum ultricies congue. Nam eget leo a elit vestibulum tincidunt in elementum nunc. Nunc cursus lacus eu placerat auctor.
</p>
<div class="cover">
  <div class="modal">
    <div class="header">
      <div>Header</div>
      <div><a href="#">Close</a></div>
    </div>
    <div class="scrollView">
      <div class="body">
        Body short content
      </div>
    </div>
    <div class="footer">
      Footer
    </div>
  </div>
</div>

Comment puis-je résoudre ça?

0
Miguel Moura 7 févr. 2020 à 00:56

1 réponse

Meilleure réponse

Vous pouvez simplifier votre code comme ci-dessous et vous fier à flexbox à l'intérieur du modal au lieu de position:absolute;

.cover {
  background-color: rgba(0, 0, 0, 0.4);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 200;
  display:flex;
  align-items:center;
  justify-content:center;
}

.modal {
  background-color: white;
  max-width: 400px;
  width:100%;
  max-height: 60vh;
  display:flex; 
  flex-direction:column;
}

.scrollView {
  flex-grow:1;
  border: 2px solid red;
  overflow: auto;
}

div.header,
div.footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  background: lightgreen;
  padding: 0 20px;
  flex-shrink:0;
}

div.footer {
  background: orange;
  justify-content: center;
}
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor aliquet orci sit amet fringilla. Duis a ligula consequat, ornare elit eu, tincidunt turpis.
</p>
<p>Nulla faucibus ultrices est eu laoreet. Suspendisse accumsan blandit ipsum ultricies congue. Nam eget leo a elit vestibulum tincidunt in elementum nunc. Nunc cursus lacus eu placerat auctor.
</p>
<div class="cover">
  <div class="modal">
    <div class="header">
      <div>Header</div>
      <div><a href="#">Close</a></div>
    </div>
    <div class="scrollView">
      <div class="body">
        Body <br>short <br>content
      </div>
    </div>
    <div class="footer">
      Footer
    </div>
  </div>
</div>
1
Temani Afif 7 févr. 2020 à 12:11