响应式可滚动 Div

Question

我想知道是否有可能使 div 具有响应性，同时使其内容在某些尺寸（最大/最小高度）内可滚动。

这是我的尝试

虽然宽度响应，但高度保持不变（虽然我希望它是 100 像素最小和 400 像素最大）。

.wrapper {
    overflow: auto;
    max-height: 400px;
    width: 50%;
}
.content {
    overflow-y: auto;
}

Answer 1

简单，只需使用vhcss 单位作为高度，如下所示：height: 100vh

.wrapper {
    overflow: auto;
    height: 100vh;
    width: 50%;

    border: 1px solid red;
}
.content {
    overflow-y: auto;
}

该1 vh单位相对于视口高度的 1% ，这意味着您的 div 将取决于视口的高度。

如果您的视口小于 div，您将能够滚动浏览它。