高度计算由浏览器：包含块和孩子 [英] Height Calculation By Browsers : Containing Blocks and Children
问题描述
在SO本身中选择 - 浏览器进行的高度计算（当我们没有显式设置 height 但是我们设置了 （具有相对于容器的百分比高度）的 容器 b
$ b
Picked up this in SO itself - the 'height calculation' made by browsers (when we have not explicitly set a height but we have set a min-height) for a container that has children (who have height in percentages with respect to the container):
-
没有设置高度，我设置
min-height请注意，height的计算值是min-height给出的值。
Without setting a height, I set
min-heightand it doesn't work- note that the computed value of height is the value I gave formin-height. The children do not get 50% height that I have given them - see below:
* {
box-sizing: border-box;
}
.inline-container,
.block-container,
.float-container,
.inline-block-container {
border: 1px solid red;
min-height: 100px;
}
.inline-container > * {
border: 1px solid;
height: 50%;
}
.block-container > * {
border: 1px solid;
height: 50%;
}
.float-container > * {
float: left;
border: 1px solid;
height: 50%;
}
.float-container:after {
clear: both;
content: '';
display: block;
}
.inline-block-container > * {
display: inline-block;
border: 1px solid;
height: 50%;
}
<body>
<div class="inline-container">
<span>Inline 1</span>
<span>Inline 2</span>
</div>
<div class="block-container">
<div>Block 1</div>
<div>Block 2</div>
</div>
<div class="float-container">
<div>Float 1</div>
<div>Float 2</div>
<div>Float 3</div>
</div>
<div class="inline-block-container">
<div>Inline block 1</div>
<div>Inline block 2</div>
<div>Inline block 3</div>
</div>
</body>
c $ c> height：0 它工作！请参见以下示例：
Now I set height: 0 it works! See example below:
* {
box-sizing: border-box;
}
.inline-container,
.block-container,
.float-container,
.inline-block-container {
border: 1px solid red;
min-height: 100px;
height: 0;
}
.inline-container > * {
border: 1px solid;
height: 50%;
}
.block-container > * {
border: 1px solid;
height: 50%;
}
.float-container > * {
float: left;
border: 1px solid;
height: 50%;
}
.float-container:after {
clear: both;
content: '';
display: block;
}
.inline-block-container > * {
display: inline-block;
border: 1px solid;
height: 50%;
}
<body>
<div class="inline-container">
<span>Inline 1</span>
<span>Inline 2</span>
</div>
<div class="block-container">
<div>Block 1</div>
<div>Block 2</div>
</div>
<div class="float-container">
<div>Float 1</div>
<div>Float 2</div>
<div>Float 3</div>
</div>
<div class="inline-block-container">
<div>Inline block 1</div>
<div>Inline block 2</div>
<div>Inline block 3</div>
</div>
</body>
$ b b
问题：
所以我的问题是 - 这里发生了什么 - 我真的很惊讶！为什么当我给它一个最小高度时，孩子们不尊重包含块的计算高度。
So my question is- what is happening here- I am really surprised! Why the children are not respecting the computed height of the containing block when I give it a min-height. Can you guys look into this?
推荐答案
高度 CSS属性：//developer.mozilla.org/en-US/docs/Web/CSS/heightrel =nofollow> MDN ：
The height CSS property on MDN:
百分比
百分比是根据
生成框包含的块的高度计算的。 如果未明确指定包含
块的高度（即，它取决于内容
height），并且此元素不是绝对定位的，值
将计算为auto。 根元素的百分比高度是相对于初始包含块的
。
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. A percentage height on the root element is relative to the initial containing block.
在 1。，未明确指定父级的 height 属性，因此该值计算为自动。
In 1., the height attribute of the parent isn't explicitly specified, therefore the value computes to auto.
在 2。中，指定了 height 属性，因此它是根据父
In 2., the height attribute is specified and therefore it's calculated with respect to the parent
这篇关于高度计算由浏览器：包含块和孩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
