html - 允许垂直滚动(不剪切内容)

Question

我在事件页面上有一个模态，问题是当内容在首屏以下时，它会被剪切而不是出现垂直滚动以向下滚动内容。你可以在这里看到一个例子(点击第 27 天，你会看到内容模态切割):

https://www.fundacioncb.es/agendafundacioncb

我也附上一张图片。

CSS 结构:

.modalDialog > div {
    max-width: 896px;
    position: relative;
    margin: 6% auto;
    margin-top: 90px;
    padding: 0;
    border-radius: 0px;
    background: #fff;
}

.modalDialog > div {
    margin-top: 150px !important;
}
.modalDialog * {
    display: block;
    float: none;
}

HTML

<div id="openModal27" class="modalDialog">
   <div>
      <a href="#close" title="Close" class="close">X</a>
      <div class="modal-top">
         <h3 class="modal-titulo">27 · 09 · 2019</h3>
      </div>
      <div class="articulos-dia">
         <div class="un-evento">
            <h3>Seminario formativo</h3>
            <h4>"La trata de mujeres con fines de explotación sexual desde un enfoque de género y crítico de derechos humanos"</h4>
            <img src="https://www.fundacioncb.es/wp-content/uploads/2019/09/SEMINARIO-TRATA-2.jpg">
            <p></p>
            <div class="barrita"></div>
            <p> El 27 de septiembre en el Centro Cultural "Santo Domingo" de Fundación CB (Mérida).</p>
         </div>
         <div class="un-evento">
            <h3>Exposición</h3>
            <h4>"Paisajes humanos"</h4>
            <img src="https://www.fundacioncb.es/wp-content/uploads/2019/09/uta1xerq.jpeg">
            <p></p>
            <div class="barrita"></div>
            <p> Del 7 de septiembre al 12 de octubre en Arte Joven Galería (Calle San Isidro, 16C, Badajoz).</p>
         </div>
         <div class="un-evento">
            <h3>Exposición</h3>
            <h4>"Migraña en Exposición"</h4>
            <img src="https://www.fundacioncb.es/wp-content/uploads/2019/08/cartel-merida.png">
            <p></p>
            <div class="barrita"></div>
            <p><strong>Del 23 de septiembre al 4 de octubre en Centro Cultural Santo Domingo (Mérida).</strong></p>
         </div>
         <div class="un-evento">
            <h3>Exposición</h3>
            <h4>Academia de dibujos y pinturas Miro</h4>
            <img src="https://www.fundacioncb.es/wp-content/uploads/2019/08/expo-academia-miro.jpg">
            <p></p>
            <div class="barrita"></div>
            <p><strong>Del 15 de septiembre al 15 de octubre en Centro Cultural Santo Domingo (Mérida).</strong></p>
         </div>
         <div class="un-evento">
            <h3>Exposición</h3>
            <h4>"Haiku del alma", de Teresa Crespo</h4>
            <img src="https://www.fundacioncb.es/wp-content/uploads/2019/08/15-La-bru´jula-2.jpg">
            <p></p>
            <div class="barrita"></div>
            <p><strong>Del 10 al 27 de septiembre en Espacio CB Arte (Badajoz).</strong></p>
         </div>
         <div class="un-evento">
            <h3>Formativo</h3>
            <h4>MALVALUNA</h4>
            <img src="https://www.fundacioncb.es/wp-content/uploads/2019/08/malvaluna.png">
            <p></p>
            <div class="barrita"></div>
            <p><strong>El 27 de septiembre de 9:30h a 14:00h en el Centro Cultural “Santo Domingo” de Fundación CB (Mérida).</strong></p>
         </div>
         <div class="un-evento">
            <h3>Curso</h3>
            <h4>Asesoría e Imagen</h4>
            <img src="https://www.fundacioncb.es/wp-content/uploads/2019/08/mujer-seleccionando-fotografias-personas_1134-466.jpg">
            <p></p>
            <div class="barrita"></div>
            <p><strong>El 27 de septiembre en la biblioteca de la RUCAB.</strong></p>
         </div>
         <div class="un-evento">
            <h3>Concierto</h3>
            <h4>Iván Sanjuan</h4>
            <img src="https://www.fundacioncb.es/wp-content/uploads/2019/08/sk8dgs49.jpeg">
            <p></p>
            <div class="barrita"></div>
            <p><strong>El 27 de septiembre a las 20:30h en el salón de actos de la RUCAB.</strong></p>
         </div>
      </div>
   </div>
</div>

Answer 1

您可以提供滚动到弹出窗口，这样您就不会丢失任何内容。添加以下 CSS。

.articulos-dia {
    height: calc(100vh - 390px);
    overflow-y: scroll;
}