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，您將能夠滾動它。