在这种情况下，高度如何计算? [英] How is the height calculated in this case?

问题描述

在此设置中:

html,
body {
  height: 100%;
}

.app {
  display: flex;
}

.menu {
  background-color: red;
  width: 100px;
}

.content {
  flex: 1;
  border: 1px solid blue;
}

<div class="app">
    <div class="menu">menu</div>
    <div class="content">
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
    </div>
  </div>

我有两个问题.

1. 您可以看到menu的高度与content的高度相同，对吗? 有人可以解释为什么吗?它是否继承了app的高度(其高度是根据content div的内容动态计算的)?

1. You can see height of menu is same as height of content, right? Can someone explain why this is? Did it inherit height of app (height of which was dynamically calculated based on content of content div)?

如果我在.menu属性中插入height: 100%，如下所示:

If I insert height: 100% inside .menu properties, like this:

.menu {
            background-color: red;
            width: 100px;
            height: 100%
      }

然后菜单高度降低.有人可以解释为什么会这样吗?如果像以前的情况那样menu应该继承app的高度，那么为什么写height:100％可以防止这种情况?

then height of menu is reduced. Can someone explain why this is the case? If menu was supposed to inherit height of app as in the previous case, then why writing height:100% prevented this?

推荐答案

对于第一种情况，它与flexbox的默认对齐方式有关，即

For the first case, it's about the default alignment of flexbox which is stretch. So all the elements will stretch to fit the height of the container¹ thus the menu is having the same height as the content. In other words, the tallest element will define the height and the other will stretch to fit that height.

更改对齐方式，您将不再有此行为:

Change the alignment and you will no more have this behavior:

html,
body {
  height: 100%;
}

.app {
  display: flex;
  align-items:flex-start; /*anything different from stretch*/
}

.menu {
  background-color: red;
  width: 100px;
  height:100%;
}

.content {
  flex: 1;
  border: 1px solid blue;
}

<div class="app">
  <div class="menu">menu</div>
  <div class="content">
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
  </div>
</div>

通过添加height:100%，您现在已明确地将高度应用到元素(不再应用拉伸)，但这将无法达到auto值(内容的高度)，因为父元素没有指定任何高度 ²

By adding height:100% you now explicitely apply a height to the element (stretch no more apply) but this will fail to auto value (the height of the content) because the parent element don't have any height specified²

html,
body {
  height: 100%;
}

.app {
  display: flex;
}

.menu {
  background-color: red;
  width: 100px;
  height:100%;
}

.content {
  flex: 1;
  border: 1px solid blue;
}

<div class="app">
  <div class="menu">menu</div>
  <div class="content">
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
  </div>
</div>

¹ 如果弹性项目的交叉尺寸属性计算为自动，并且两个交叉轴边距都不是自动的，则弹性项目被拉伸.它的使用值是使项目的边距框的交叉尺寸尽可能接近于行的尺寸所必需的长度，同时仍要遵守最小高度/最小宽度所施加的约束/max-height/max-width. 参考

¹ If the cross size property of the flex item computes to auto, and neither of the cross-axis margins are auto, the flex item is stretched. Its used value is the length necessary to make the cross size of the item’s margin box as close to the same size as the line as possible, while still respecting the constraints imposed by min-height/min-width/max-height/max-width.^ref

在这种情况下，我们只有一行，所以它与整个容器都一样.

We have only one line in our case so it's the same as the whole container.

² 指定百分比高度.相对于生成的框的包含块的高度计算百分比.如果包含块的高度不是未明确指定(即，取决于内容高度)，并且此元素不是绝对定位的，则值计算为自动" . ^参考

² Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.^ref

为应用程序增加一个高度，您将看到正在发生的事情:

Add a height to the app and you will see what is happening:

html,
body {
  height: 100%;
}

.app {
  display: flex;
  height:80%;
}

.menu {
  background-color: red;
  width: 100px;
  height:100%;
}

.content {
  flex: 1;
  border: 1px solid blue;
}

<div class="app">
  <div class="menu">menu</div>
  <div class="content">
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
  </div>
</div>

更新

根据此处的评论，是特殊情况，其中百分比高度在工作时未在父元素中指定高度.

Based on the comments here is a particular case where percentage height is working without height specified in the parent element.

html,
body {
  height: 100%;
}

.app {
  display: flex;
  height: 80%;
}

.menu {
  background-color: red;
  width: 100px;
}

.container{
  flex: 1;
  background:green;
}

.test {
  height: 80%;
  border: 2px solid blue;
}

<div class="app">
<div class="menu">menu</div>
  <div class="container">
    <div class="test">percentage height is working here!! why??</div>
  </div>
</div>

正如我在先前的答案中所述，未明确设置.container的高度，但我们没有设置具有任何循环依赖性，因为.container的高度是由拉伸行为而不是其内容定义的，因此浏览器可以首先使用Stretch设置.container高度，然后解析.test元素的百分比高度.

As I explained in a previous answer the height of the .container is not explicitly set but we don't have any cyclic dependecy because the height of the .container is defined with the stretch behavior and not his content so the browser can first set the .container height using stretch then resolve the percentage height of .test element.

在没有拉伸效果的情况下，浏览器需要首先根据内容找到高度，并且内容的高度取决于容器，因此我们具有循环依赖性，这将使百分比高度无法达到auto为了能够定义容器的高度.

Without the stretch effect, the browser need to first find the height based on the content and the content is having a height based on the container thus we have a cyclic dependency which will make the percentage height to fail to auto in order to be able to define the container height.

这篇关于在这种情况下，高度如何计算?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！