我正在使用模态窗口，尝试自动设置其高度（使用之前设置的最大高度）。但是，当高度设置为“自动”时，内部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;
}
答案 0 :(得分：1)
也许这比你想要的多一点？
.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>
这是一个非常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>
答案 1 :(得分：0)
更改.modal上的溢出属性似乎可以解决问题。
将overflow: hidden;切换为overflow: scroll
答案 2 :(得分：0)
我从.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/