时间戳

首页 > 解决方案 > 当视口缩小时，为什么 min-height 不像 min-width 那样工作？

html - 当视口缩小时，为什么 min-height 不像 min-width 那样工作？

问题描述

除了定义元素的最小宽度外，min-width 还用于在视口本身缩小时调节元素的行为。

例如，

.div1 {
    border: 5px solid;
    padding:25px;
    background-color: orangered;
    min-width:400px;
}
<div class="div1">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>

现在，如果你开始缩小视口，元素不会溢出，而是会缩小，直到达到最小宽度，此时它开始溢出。但是为什么 min-height 不会发生同样的事情呢？

.div1 {
    border: 5px solid;
    padding:25px;
    background-color: orangered;  
    min-height:500px;
}
<div class="div1">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div><br>

现在，如果你开始降低浏览器的高度，元素的高度在达到最小高度之前不会开始缩小，而是立即开始溢出。为什么？为什么当你减小视口的宽度直到它达到最小宽度点时它会缩小，但当你减小视口的高度时它不会缩小？它只是立即溢出。

标签： htmlcss

解决方案

推荐阅读