时间戳

首页 > 解决方案 > 当宽度很小时有子元素堆叠时，'min-height: 100vh' 是如何工作的？

html - 当宽度很小时有子元素堆叠时，'min-height: 100vh' 是如何工作的？

问题描述

我在父元素中有两个子元素：

 <div id="registration">
     <div id="left-panel"></div>
     <div id="right-panel"></div>
 </div>

造型：

#registration{

@include l {
    flex-direction: column;
}

#left-panel, #right-panel{
    width: 50%;
    min-height: 100vh;

    @include l {
         width: 100%;
    }
}

为简单起见，我们假设左面板没有内容，而右面板有内容（未显示）

我已经让它响应，当宽度> l（即1025px）时，两个面板并排。但是，当宽度 < l 时，面板将堆叠在一起。

我注意到当它们堆叠时，一个的高度，比如说左面板，保持不变，而另一个会增加，以确保内容不会“溢出”元素。这是因为我将高度设置为 min-height: 100vh？我问是因为如果我将“最小高度：100vh”改为“高度：100vh”，内容就会溢出。

因此，似乎 min-height 会导致父元素（即右面板）的高度发生变化以包含其所有内容。谁能证实这一点？

任何帮助表示赞赏！

标签： htmlcss

解决方案

lflex 或在这方面没有什么特别之处。

min-height只是设置元素的最小高度 - 它仍然允许扩展内容的高度会超过元素的高度，但永远不会缩小到指定值以下：

CSS 属性设置元素的min-height最小高度。它防止height属性的使用值变得小于为 指定的值min-height。

相反，height是一个固定高度，其中元素不允许扩展，如果内容多于元素可以容纳的内容，内容将被截断：

heightCSS 属性指定元素的高度。默认情况下，该属性定义内容区域的高度。

如果没有 height指定，则使用默认值height: auto，它根据内容的高度为元素提供灵活的高度。该元素将仅与容纳内容所需的一样高，并且将无限期地扩展以包含它。

推荐阅读