最大高度溢出问题

Question

我正在使用模态窗口，尝试自动设置其高度（使用之前设置的最大高度）。但是，当高度设置为“自动”时，内部div不会创建滚动条，从而无法读取其内容。

问题是：如何在保持内部滚动条的同时拥有自动高度？

我做了一个小提琴演示：https://jsfiddle.net/x1um8tqz/6/

这是模态基本结构：

<div class="fade">
  <div class="modal">
    <div class="modal-contents">
      <div class="modal-header">
        Header
      </div>
      <div class="modal-body">
           <!-- variable contents here -->
      </div>
    </div>
  </div>
</div>

CSS：

.fade {
  position: fixed; 
  background: rgba(0,0,0,0.4); 
  width: 100%; 
  height: 100%; 
  top: 0; 
  left: 0;
}

.modal {
  position: absolute;
  background: #fff; 
  border-radius: 5px;
  width: 400px;
  max-height: calc(100% - 100px);
  height: auto;
  /* Works but window will be always max height */
  /*height: calc(100% - 100px);*/
  top: 50px; 
  left: calc(50% - 200px);
  overflow: hidden;
}

.modal-contents {
  position: relative; 
  width: 100%; 
  height: 100%;
}

.modal-header {
  height: 25px;
  padding: 0 10px;
  line-height: 25px;
}

.modal-body {
  height: calc(100% - 25px);
  overflow: auto;
}

Answer 1

更新2

也许这比你想要的多一点？

＆＃13;

＆＃13;

.fade {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}
.modal {
  width: 80%;
  margin: 0 auto;
}
.modal-contents {
  margin: 100px 5px;
  padding: 5px;
  border-radius: 5px;
  background-color: white;
  min-height: 1px;
}
.modal-header {
  font-weight: 600;
  height: 25px;
  line-height: 25px;
}
.modal-body {
  min-height: calc(100% - 25px);
  max-height: 80vh;
  overflow: auto;
}

＆＃13;

<div class="fade">
  <div class="modal">
    <div class="modal-contents">
      <div class="modal-header">
        Header
      </div>
      <div class="modal-body">
        <!-- Example content -->
        Test
        <br/>123
        <br/>Test
        <br/>123
        <br/>Test
        <br/>123
        <br/>Test
        <br/>123
        <br/>Test
        <br/>123
        <br/>Test


        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, ipsa.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, odio!</p>
        <p>Incidunt consequuntur consectetur praesentium, optio nulla maiores maxime culpa quisquam?</p>
        <p>Perferendis similique cupiditate cum expedita mollitia temporibus quam doloremque nemo.</p>
        <p>Temporibus aperiam cumque amet, necessitatibus modi repudiandae! Tenetur, magni, error!</p>
        <p>Expedita et libero tenetur consequatur explicabo esse, quibusdam nulla voluptas.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem modi, facilis quas, accusamus illum ex quidem magni consectetur similique saepe cupiditate. Culpa, cum, expedita. Aut reprehenderit velit deserunt minus placeat.</p>
        <p>Voluptate aliquam autem soluta pariatur ducimus qui molestias doloremque officia alias sapiente corrupti recusandae possimus fuga laudantium, assumenda minus est blanditiis, ex voluptas ab ipsam natus. Quidem doloribus voluptate illum.</p>
        <p>Delectus inventore neque optio sequi deserunt. Quaerat nisi, autem alias quas quo veritatis dolore ullam, aliquid deserunt, aspernatur consequatur eligendi? Minus dolorem, illo accusantium dolorum magnam porro asperiores temporibus nesciunt.</p>
        <p>Accusantium culpa nam vero in quae eveniet ipsam dolorum quo nihil maiores. Esse aspernatur eos quibusdam, temporibus reiciendis reprehenderit omnis cumque aliquam tenetur et! Qui praesentium beatae reiciendis repellendus quos.</p>
        <p>Debitis ullam perspiciatis, ratione dolorem repellat odit incidunt placeat cumque enim aliquid culpa esse, sit fugit harum quisquam animi. Mollitia sequi est ad, expedita commodi dignissimos officiis, debitis quia fugiat!</p>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

更新1

这是一个非常hacky的解决方案，但基本上我只是修改了标题元素的位置，使其z-index更高并给它一个背景。我还必须更改.modal-body元素的填充。给我一点时间来摆弄这个，我会发布另一个更新。

原始

我相信这可以做你想要的。默认情况下（除非我完全弄错了，如果我是某人请告诉我），元素的高度为auto，因此没有必要声明它。我通过添加段落来测试它几次，以允许滚动并将其取出以确保div缩小。

＆＃13;

＆＃13;

.fade {
  position: fixed;
  background: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.modal {
  position: absolute;
  background: #fff;
  border-radius: 5px;
  width: 400px;
  max-height: calc(100% - 100px);
  /* Works but window will be always max height */
  /*height: calc(100% - 100px);*/
  top: 50px;
  left: calc(50% - 200px);
  overflow-y: auto;
}
.modal-contents {
  position: relative;
  width: 100%;
  height: 100%;
}
.modal-header {
  position:fixed;
  height: 25px;
  padding: 0 10px;
  line-height: 25px;
  z-index:100;
  background-color:white;
}
.modal-body {
  padding-top:25px;
  height: calc(100% - 25px);
  overflow: auto;
}

＆＃13;

<div class="fade">
  <div class="modal">
    <div class="modal-contents">
      <div class="modal-header">
        Header
      </div>
      <div class="modal-body">
        <!-- Example content -->
        Test
        <br/>123
        <br/>Test
        <br/>123
        <br/>Test
        <br/>123
        <br/>Test
        <br/>123
        <br/>Test
        <br/>123
        <br/>Test
        <br/>123
        <br/>Test
        <br/>123
        <br/>Test
        <br/>123
        <br/>Test
        <br/>123
        <br/>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, ipsa.</p>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

更改.modal上的溢出属性似乎可以解决问题。

将overflow: hidden;切换为overflow: scroll

Answer 3

我从.modal-contents删除了高度（以auto为单位并允许它升高）并将overflow-y: auto;添加到modal。如果从HTML中删除部分示例内容，您会看到高度缩小（我认为这也是您想要的 - 如果不是，请添加min-height设置）。

.fade {
  position: fixed; 
  background: rgba(0,0,0,0.4); 
  width: 100%; 
  height: 100%; 
  top: 0; 
  left: 0;
}

.modal {
  position: absolute;
  background: #fff; 
  border-radius: 5px;
  width: 400px;
  max-height: calc(100% - 100px);
  height: auto;
  top: 50px; 
  left: calc(50% - 200px);
  overflow-y: auto;
}

.modal-contents {
  position: relative; 
  width: 100%; 
}

.modal-header {
  height: 25px;
  padding: 0 10px;
  line-height: 25px;
}

.modal-body {
  height: calc(100% - 25px);
  overflow: auto;
}

这是一个小提琴：https://jsfiddle.net/en5fb3mf/

在看到其他答案的评论后添加/编辑：以下是具有固定标题的版本：https://jsfiddle.net/en5fb3mf/2/