Question

我正在创建一个简单的弹出对话框。父母应该有max-height: 90%。父母有两个孩子。第一个是带有min-height: Xpx的标题，第二个是应该填充其余空间（高度）的内容。如何描述限制内容高度的规则，以便内容具有滚动条？

.parent {
    max-height: 90%;
}

.title {
    min-height: Xpx; /* title should be able to grow when needed*/
}

.content {
    overflow: auto;
}

<div class="parent">
    <div class="title">

    </div>
    <div class="content">

    </div>
</div>

Answer 1

您可以使用flexbox完成此操作。

.parent {
  display: flex;
  flex-direction: column; //set directon top to bottom
}

.content {
  flex: 1; //Takes up remaining space
  overflow: auto; //show scrollbar when content is overflowing
}

请不要忘记供应商前缀。

Answer 2

您已经很近了。有一个属性可以使您轻松实现内容的高度。只需将高度设置为-webkit-fill-available。这应该有帮助：

.parent {
    max-height: 90%;
}

.title {
    min-height: Xpx; /* title should be able to grow when needed*/
}

.content {
    overflow: auto;
    height: -webkit-fill-available;
    overflow-y: auto; 
    overflow-x: hidden;
}

当孩子的身高未知时，其父对象的滚动条具有最大身高百分比

2 个答案: