Div在Chrome中的100％高度溢出体 [英] Div with 100% height overflowing body in Chrome
问题描述
我试图按照中的样子
这就是它在chome中的样子：
更新：'center'div应该是一个非flex div，仍然必须有100％的高度。原因是有非flex的div是我的真正的网站结构是相当复杂 - 它使用了很多webcomponents，其中一些只是不能使用flex。所以在某些时候，我不得不停止使用flex和'正常'div有100％的高度。
来自于在同一声明块中组合 height 和 flex-basis 属性的事实。它似乎创造了一个冲突。在我下面的答案中，我删除了高度，并使用 flex-basis 。
（1）
< div class =green-border
style =flex：1 1 auto; display：flex; flex-direction：row; width：100％; height：100％; >
TO
< div class =green-border
style =flex：1 1 100％; display：flex; flex-direction：row; width：100％; >
注释：removed height 改用 flex-basis ;
2）
< div style =flex：1 1 auto; width：100％; height：100％;> code>
TO
< div style = 1 1 100％; width：100％; display：flex;>
> height ;使用 flex-basis 建立嵌套的flex容器;
（3）
< div style =background-color：＃ff6500; width：100％; height：100％;> center< / div>
TO
< div style =background-color：＃ff6500; width：100 ％; flex：1 1 100％;>中心< / div>
notes：removed height ;使用 flex-basis ;添加 flex 属性;
最后，
TO
class =blue-border
Chrome类似：
所有框都位于
对嵌套的非flex元素应用100％的高度
在大多数情况下，对子元素使用百分比高度时，还必须为父元素和所有祖代元素指定百分比高度，直到包括根元素。
html，body {height：100％; }
我已解释原因：
但请仔细查看 spec 显示一个例外：
百分比是相对于
生成的框的包含块的高度计算的。如果未明确指定包含
块的高度（即，它取决于内容
height），并且此元素不是绝对定位的，值
计算为'auto'。 / p>
请注意部分： ...且元素不是绝对定位的。
$ b
因此，请在中心框中尝试：
更改：
（5）
< div style =background-color：＃ff6500; width ：100％; flex：1 1 100％;center/ div>
TO
< div style =background-color：＃ff6500; width：100％; flex：11 100％; position：relative;>
< div style =border：5px solid yellow; position：absolute; height：100％; width：100％;>
center< / div>
< / div>
注意：
- 添加了
position：relative以建立绝对定位的最接近的祖先 - 创建新的嵌套非柔性
div容器 - 使用
高度应用绝对定位到新。div：100％
使用绝对定位，您不需要将百分比高度应用于父容器。 / p>
I'm trying to make 100% height flex's child as described here and here . In firefox and IE it's shown as expected, but in chrome it's messed up. The divs are getting out of the body. Is it yet another side effect of chrome following the spec to the tee or still a bug?
The code:
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div {
border: 1px solid black;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.red-border {
border: 2px solid red;
}
.blue-border {
border: 2px solid blue;
}
.green-border {
border: 2px solid green;
}
</style>
</head>
<body class="red-border" >
<div clsas="blue-border" style="display: flex; flex-direction: column; width: 100%; height: 100%;">
<div style="flex: 0 1 auto; ">top</content></div>
<div class="green-border" style="flex: 1 1 auto; display: flex; flex-direction: row; width: 100%; height: 100%;" >
<div style="flex: 0 1 auto; ">left</div>
<div style="flex: 1 1 auto; width: 100%; height: 100%;">
<div style="background-color: #ff6500; width: 100%; height: 100%;">center</div>
</div>
<div style="flex: 0 1 auto; ">right</div>
</div>
<div style="flex: 0 1 auto; ">bottom</content></div>
</div>
</body>
</html>
plnkr: http://run.plnkr.co/plunks/wi5MQYK5yEdzdgQBaUWh/
that's how it looks in ff and ie (11):
that's how it looks in chome:
UPDATE: The 'center' div should be a non-flex div and still have to have 100% height. The reason is to have non-flex div is that my real site structure is quite complicated - it uses a lot of webcomponents and some of them just can't use flex. So at some point I have to stop using flex and have 'normal' div to have height 100%.
The problem seems to stem from the fact that you're combining both the height and flex-basis properties in the same declaration block. It appears to create a conflict. In my answer below I've removed the heights and used flex-basis instead. You'll note a couple of other adjustments, as well.
Change:
(1)
<div class="green-border"
style="flex: 1 1 auto; display: flex; flex-direction: row; width: 100%; height: 100%;" >
TO
<div class="green-border"
style="flex: 1 1 100%; display: flex; flex-direction: row; width: 100%;" >
notes: removed height; used flex-basis instead;
(2)
<div style="flex: 1 1 auto; width: 100%; height: 100%;">
TO
<div style="flex: 1 1 100%; width: 100%; display: flex;">
notes: removed height; used flex-basis instead; established nested flex container;
(3)
<div style="background-color: #ff6500; width: 100%; height: 100%;">center</div>
TO
<div style="background-color: #ff6500; width: 100%; flex: 1 1 100%;">center</div>
notes: removed height; used flex-basis instead; added flex property;
Lastly, the blue border wasn't showing due to a typo.
(4)
clsas="blue-border"
TO
class="blue-border"
With the adjustments above, the layout renders in Chrome like this:
All boxes lie within their containers.
Applying 100% height to nested, non-flex elements
In most cases, when using percentage heights on child elements, a percentage height must also be specified for the parent element and all ancestor elements, up to and including the root element.
html, body { height: 100%; }
I have explained the reason for this here:
But a close look at the spec reveals an exception:
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'.
Note the part: ... and the element is not absolutely positioned.
Hence, try this on the "center" box:
Change:
(5)
<div style="background-color: #ff6500; width: 100%; flex: 1 1 100%;">center</div>
TO
<div style="background-color: #ff6500; width: 100%; flex: 1 1 100%; position: relative;">
<div style="border: 5px solid yellow; position: absolute; height: 100%; width: 100%;">
center</div>
</div>
Notes:
- added
position: relativeto establish nearest positioned ancestor for absolute positioning - created new, nested, non-flex
divcontainer - applied absolute positioning to new
divwithheight: 100%.
With absolute positioning you do not need to apply percentage heights to parent containers.
这篇关于Div在Chrome中的100％高度溢出体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
