缩小浏览器时缩小div高度

Question

我将 div 设置为 height: 400px; 和 width 100%;

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

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

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

Answer 1

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

---

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

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

相关 CSS

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; 
}

---

注意：if your browser is modern enough 并且支持vh/vw 单位不需要设置body和html元素的高度：只需应用

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

在你的 div 元素上

Answer 2

将 height:100% 和 max-height:400px 都分配给 DIV。