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）中，像素单位为px而不是 auto 需要基于内容同时进行div扩展和收缩，所以我不想在px（像素）中具有height属性。

如何仅在内部div保持基于内容的div扩展的同时获取内部div的滚动条？

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

Answer 1

如果要使用滚动条，则必须为父容器定义一个不是auto的高度值。只要您要滚动的子项小于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>

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

1 个答案: