html - 最大高度溢出问题

Question

我正在处理模态窗口，试图让它的高度自动设置(之前设置了最大高度)。但是，当高度设置为“auto”时，内部 div 不会创建滚动条，因此无法阅读其内容。

问题是:如何在保持内部滚动条的同时获得自动高度？

我做了一个 fiddle 来演示: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

也许这是您想要的更多一点？

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

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

更新1

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

原创

我相信这可以满足您的需求。默认情况下(除非我完全弄错了，如果我是某人请告诉我)元素的高度是 auto，所以没有真正需要声明它。我对它进行了几次不同的测试，方法是添加段落以允许滚动，然后将其取出以确保 div 缩小。

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

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