html - 具有内部 DIV 的动态内容的 CSS Div 高度设置

Question

CSS 代码:

 .modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 4;
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    /*  overflow: auto; Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.8);
    /* Black w/ opacity */
}

/* Modal outer div*/

.modal-content {
    background-color: lightgrey;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 56%;
    height: auto;
    max-height: 70%
}

/* inner div */

.modal-content1 {
    background-color: lightgrey;
    margin: auto;
    padding: 1.5%;
    /* border: 1px solid #888;   */
    width: auto;
    height: auto;
    overflow: auto;
    max-height: 83%
}

HTML 代码:

<!-- The Modal to create flash background with z-index-->
<div id="myModal" class="modal">
    <!-- Div to hold close button and  Acknowledge button which should act as window without scroll-->
    <div class="modal-content">
        <span class="close">&times;</span>
        <!-- close button -->
        <!-- div to hold actual dynamic content which requires scroll -->
        <div class="modal-content1">
            MY DYNAMIC CONTENT GOES HERE
        </div>
        <!-- Acknowledge button -->
        Acknowledge button will code will be placed here
    </div>
</div>

在 modal-content1(内部 div)css 类中，我添加了溢出属性，但我仍然无法在使用相同 modal-content1 的内部 div 中获得滚动条。

注意:如果我在 modal-content(外部 div)中设置 height: values in px 而不是 auto 并且我需要根据内容扩展和收缩 div，所以我不想以 px(像素)为单位设置高度属性。

如何只为内部 div 设置滚动条以保持外部 div 扩展而内部 div 根据内容扩展？

为了清楚我的设计，我正在尝试创建带有按钮的内容窗口，因此我只需要滚动内容而不是按钮。因此，我们的 div 将包含按钮和具有动态内容的内部 div。

Answer 1

如果你想要滚动条，你将不得不为你的父容器定义一个高度值，而不是自动。只要您希望滚动的子项小于 100%，即使对所有容器使用百分比也可以。这应该适合你:

<style type="text/css">
  .modal {
    position: fixed; /* Stay in place */
    z-index: 4; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height:100%; /* Full height */
    /*  overflow: auto; Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
  }


  /* Modal outer div*/
  .modal-content {
    background-color: lightgrey;
    margin: auto;
    padding: 20px;
    border: 1px solid #888; 
    width: 56%;
    height: auto;   
    height:100%

  }
  /* inner div */
  .modal-content1 {
    background-color: lightgrey;
    margin: auto;
    padding: 1.5%;  
    /* border: 1px solid #888;   */
    width: auto;
    height: auto;
    overflow: auto;
    height:50%

  }
</style>


<!-- The Modal to create flash background with z-index-->
<div id="myModal" class="modal"> 
  <!-- Div to hold close button and  Acknowledge button which should act as window without scroll-->
  <div class="modal-content">
    <span class="close">&times;</span> <!-- close button -->   
    <!-- div to hold actual dynamic content which requires scroll -->
    <div class="modal-content1"> 
      <h1>
        content
      </h1>
      data<br><br><br>
      <h1>
        content
      </h1>
      data<br><br><br>
      <h1>
        content
      </h1>
      data<br><br><br>
    </div> 
    <!-- Acknowledge button -->
    Acknowledge button will code will be placed here
  </div>
</div>