响应可滚动分区

Question

我想知道是否可以使div响应，同时使其内容在某些维度（最大/最小高度）内可滚动。

这是我的尝试

http://codepen.io/anon/pen/rVEbWG

虽然宽度是响应的，但高度保持不变（我希望它是100px min和400px max）。

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

Answer 1

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

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

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

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

如果您的视口小于div，则可以滚动它。