在这种情况下如何计算高度?
[英] How is the height calculated in this case?
本文介绍了在这种情况下如何计算高度?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在此设置中:
html,身体 {高度:100%；}.应用程序 {显示:弹性；}.菜单 {背景颜色:红色；宽度:100px；}.内容 {弹性:1；边框:1px纯蓝色；}
<div class="menu">menu</div><div class="内容"><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div>
我有两个问题.
你可以看到menu的高度和content的高度一样，对吧?有人可以解释这是为什么吗?是否继承了app的高度(高度是根据content div的内容动态计算出来的)?
如果我在 .menu 属性中插入 height: 100%，就像这样:
.menu {背景颜色:红色；宽度:100px；高度:100%}
然后菜单的高度减少.有人可以解释为什么会这样吗?如果 menu 应该像前面的例子一样继承 app 的高度，那么为什么写 height:100% 阻止了这个?
解决方案
对于第一种情况，关于 flexbox 的默认对齐方式是 stretch.因此，所有元素都将拉伸以适应容器的高度1，因此菜单与内容具有相同的高度.换句话说，最高的元素将定义高度，另一个将拉伸以适应该高度.
更改对齐方式，您将不再有这种行为:
html,身体 {高度:100%；}.应用程序 {显示:弹性；对齐项目:flex-start;/*任何与拉伸不同的东西*/}.菜单 {背景颜色:红色；宽度:100px；高度:100%；}.内容 {弹性:1；边框:1px纯蓝色；}
<div class="menu">menu</div><div class="内容"><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div>
通过添加 height:100%，您现在可以明确地将高度应用于元素(拉伸不再应用)，但这将无法auto 值(元素的高度)content) 因为父元素没有指定任何高度2
html,身体 {高度:100%；}.应用程序 {显示:弹性；}.菜单 {背景颜色:红色；宽度:100px；高度:100%；}.内容 {弹性:1；边框:1px纯蓝色；}
<div class="menu">menu</div><div class="内容"><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div>
<块引用>1 如果 flex 项的 cross size 属性计算为 auto，并且横轴边距都不是 auto，则 flex 项被拉伸.它的使用值是使项目的边距框的横向尺寸尽可能接近与线的尺寸相同所需的长度，同时仍然遵守 min-height/min-width 强加的约束/max-height/max-width.ref
我们的案例中只有一行，所以它与整个容器相同.
<块引用>2 指定百分比高度.该百分比是相对于生成的框的包含块的高度计算的.如果包含块的高度未明确指定(即取决于内容高度)，并且该元素不是绝对定位的，则值计算为'auto'.ref
给应用添加一个高度，你就会看到发生了什么:
html,身体 {高度:100%；}.应用程序 {显示:弹性；高度:80%；}.菜单 {背景颜色:红色；宽度:100px；高度:100%；}.内容 {弹性:1；边框:1px纯蓝色；}
<div class="menu">menu</div><div class="内容"><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div><div>内容</div>
更新
根据这里的评论是一个特殊案例，其中百分比高度在父元素中没有指定高度的情况下有效.
html,身体 {高度:100%；}.应用程序 {显示:弹性；高度:80%；}.菜单 {背景颜色:红色；宽度:100px；}.容器{弹性:1；背景:绿色；}.测试 {高度:80%；边框:2px 纯蓝色；}
<div class="menu">menu</div><div class="容器"><div class="test">百分比高度在这里起作用！！为什么?</div>
正如我在之前的答案中所解释的，.container 的高度没有明确说明set 但我们没有任何循环依赖，因为 .container 的高度是用拉伸行为定义的，而不是他的内容，所以浏览器可以先设置 .container高度使用拉伸然后解析 .test 元素的百分比高度.
<块引用>
如果 flex 项目具有 align-self:stretch，则为其内容重做布局，将此使用的大小视为其确定的交叉大小，以便可以解析百分比大小的子项.ref
没有拉伸效果，浏览器首先需要根据内容找到高度，而内容的高度是基于容器的，因此我们有一个循环依赖，这会使百分比高度无法auto 以便能够定义容器高度.
In this setup:
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>
I have two questions.
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)?
If I insert height: 100% inside .menu properties, like this:
.menu {
background-color: red;
width: 100px;
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?
解决方案
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 container1 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>
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 specified2
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>
1 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.
2 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>
UPDATE
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>
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.
If the flex item has align-self: stretch, redo layout for its contents, treating this used size as its definite cross size so that percentage-sized children can be resolved. ref
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屋！
