Responsive Scrollable Div

Question

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

这是我尝试

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

而宽度响应的高度保持不变（而我想这是100px的最小和最大400像素）。

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

Answer 1

宽度是响应，但我不知道你试图达到什么样的高度。

您是否希望div的高度为400px，或者您希望div的高度取决于内容的高度？

如果您希望它取决于内容的高度，那么只需删除“max-height：400px;”

Answer 2

简单，只需使用vh CSS单位的高度，就像这样：height: 100vh

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

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

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

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