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;
}

Answer 2

这是您可以设置流内容滚动的方式。检查以下代码

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style>
    .wrapper{
      overflow-y: scroll;
      border: 1px solid #e5e5e5;
      max-width: 750px;
      margin: 0 auto;
      max-height: 300px;
      padding: 20px;
    }
      .div-1 p{
          color: #3d3d3d;
          font-size: 16px;
          line-height: 1.5;
          margin: 0 0 20px;
      }
    </style>
</head>
<body>

<div class="wrapper">
  <div class="div-1">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>


</body>


</html>

允许垂直滚动（不剪切内容）

2 个答案: