我需要一个位于中心的模态，支持动态内容高度，并在内容高度大于屏幕时支持滚动条。
这是我的尝试：
#outer {
position: fixed;
margin: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: calc(100vh - 80px);
height: 100%;
}
#inner {
background-color: #0000FF;
color: #FFF;
padding: 10px;
height: 100%;
overflow: auto;
}
.content-item {
margin-bottom: 50px;
}<html>
<body>
<div id="outer">
<div id="inner">
<div class="content-item" style="background-color: red">My Content</div>
<div class="content-item">My Content</div>
<div class="content-item">My Content</div>
<div class="content-item">My Content</div>
<div class="content-item">My Content</div>
<div class="content-item">My Content</div>
<div class="content-item">My Content</div>
<div class="content-item">My Content</div>
<div class="content-item">My Content</div>
<div class="content-item">My Content</div>
<div class="content-item">My Content</div>
<div class="content-item">My Content</div>
<div class="content-item">My Content</div>
<div class="content-item">My Content</div>
<div class="content-item">My Content</div>
<div class="content-item" style="background-color: yellow">My Content</div>
</div>
</div>
</body>
</html>问题是…如果内容不大于屏幕，它将占据整个高度(尝试只留下第一个和最后一个。contentdiv.
以下是解决方案：
#outer {
position: fixed;
margin: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
}
#inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: calc(100% - 80px);
padding: 10px;
background-color: #0000FF;
color: #FFF;
overflow-y: scroll;
}
.content-item {
margin-bottom: 50px;
}<div id="outer">
<div id="inner">
<div class="content-item" style="background-color: red">My Content</div>
<div class="content-item">My Content</div>
<div class="content-item">My Content</div>
<div class="content-item">My Content</div>
<div class="content-item">My Content</div>
<div class="content-item">My Content</div>
<div class="content-item">My Content</div>
<div class="content-item">My Content</div>
<div class="content-item">My Content</div>
<div class="content-item">My Content</div>
<div class="content-item">My Content</div>
<div class="content-item">My Content</div>
<div class="content-item">My Content</div>
<div class="content-item">My Content</div>
<div class="content-item">My Content</div>
<div class="content-item" style="background-color: yellow">My Content</div>
</div>
</div>