缩小浏览器时缩小 div 高度

Question

我设置了一个div来height: 400px;和width 100%;

我希望它在浏览器缩小时变小。 max-height: 400px将是一个答案，但随后div 变为 0px 高......如果你明白我的意思。div 不再是 400px 高，最大高度：400px;

div 的内容是文本。 此文本仍然可见，但我需要整个div 为 400px 高（用于背景颜色和此div 下方的div）。

我想要

的：我想要一个最小高度的div，但在浏览器缩小时会缩小......

Answer 1

示例代码笔：http://cdpn.io/cjyaq

---

将height:100%和max-height: 400px设置为div元素

还为html和body元素设置height: 100%

相关云集

html, body { padding: 0; margin: 0; height: 100%; }
div { 
  border: 3px red solid;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 100%; max-height: 400px; 
}

---

注意：如果您的浏览器足够现代并且支持vh/vw单位，则不需要设置正文和html元素的高度：只需应用

height: 100vh; max-height: 400px;

在您的div 元素上

Answer 2

将高度：100% 和最大高度：400px 分配给 DIV。