我将一个 div 设置为 height: 400px;
和 width 100%;
我希望它在浏览器缩小时变小。 max-height: 400px
将是一个答案,但随后 div 变为 0px 高......如果你明白我的意思。使用 max-height: 400px 时,div 不再高 400px;
div 的内容是文本。此文本仍然可见,但我需要整个 div 的高度为 400px(用于背景颜色和此 div 下面的 div)。
我想要的:我想要一个具有最小高度的 div,但会在浏览器缩小时缩小...
最佳答案
Example codepen: http://cdpn.io/cjyaq
为 div
元素设置 height:100%
和 max-height: 400px
同时为 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 元素上
关于html - 缩小浏览器时缩小div高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19158467/