时间戳

首页 > 解决方案 > 为什么 CSS 百分比 (%) 高度应用于 flex 元素的孙子？

html - 为什么 CSS 百分比 (%) 高度应用于 flex 元素的孙子？

问题描述

我正在尝试检查 CSS 100% height 属性是如何工作的。但有一点我无法理解。

为什么 100% 高度在.flex-grand-child(Chrome) 上完美运行？.flex-child有高度属性吗？那为什么它甚至可以工作？？？

这是JSFiddle

html, body {
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.flex-parent {
  flex: 1 0 auto;
  display: flex;
}

.flex-child {
    width: 300px;
}

.flex-grand-child {
   height: 100%;
   background-color: green;
}
<div class="container">
    <div class="flex-parent">
        <div class="flex-child">
          <div class='flex-grand-child'></div>
        </div>
    </div>
</div>

标签： htmlcssflexbox

解决方案

这是一种特殊情况，由于 flexbox 的拉伸效果，浏览器可以处理高度的百分比值。的flex-child默认对齐方式等于拉伸，这相当于让height:100%也flex-parent用 填充其父高度flex-grow:1。height:100%最后，浏览器能够正确解析flex-grand-child

如果 flex 项目有align-self: stretch，则对其内容重做布局，将此使用的大小视为其确定的交叉大小，以便可以解决百分比大小的子项。参考

如果禁用拉伸对齐，它将中断：

html,
body {
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.flex-parent {
  flex: 1 0 auto;
  display: flex;
}

.flex-child {
  width: 300px;
  min-height: 200px;
  align-self: flex-start; /*this will break it*/
  border: 1px solid;
}

.flex-grand-child {
  height: 100%;
  background-color: green;
}
<div class="container">
  <div class="flex-parent">
    <div class="flex-child">
      <div class='flex-grand-child'></div>
    </div>
  </div>
</div>

简单来说：在有拉伸效果的时候，浏览器会先根据自己的父级定义父级的高度（内容在这里不起作用），然后浏览器会做出height:100%之前计算的高度的内容。如果不拉伸，浏览器需要考虑内容来定义父级的高度，这里我们将陷入经典的百分比高度问题。

获得更多无需在父元素上定义显式高度即可解决百分比的相关问题：为什么我的 Grid 元素的高度计算不正确？

以下是处理此问题的规范的相关部分：https ://www.w3.org/TR/css-sizing-3/#percentage-sizing

这有点复杂，但它与 CSS2 规范不同，如果未指定父高度，百分比将始终失败：

如果包含块的高度没有明确指定（即，它取决于内容高度），并且该元素不是绝对定位的，则该值计算为'auto'。

推荐阅读