Question

我正在尝试按照here和here所述制作100％高度的flex儿童。在firefox和IE中，它显示为预期，但在Chrome中它已经搞砸了。 div正在走出身体。是不是铬的另一个副作用是遵循规格发球还是仍然是一个错误？

代码：

<!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/

它在ff中看起来如何，即（11）：

它在chome中的样子：

更新：'center'div应该是非flex div并且仍然必须具有100％的高度。原因是非flex的div是我的真实站点结构非常复杂 - 它使用了很多web组件，其中一些只是不能使用flex。因此，在某些时候我必须停止使用flex并使用'normal'div来使高度达到100％。

Answer 1

问题似乎源于您在同一声明块中同时合并height和flex-basis属性的事实。它似乎造成了冲突。我在下面的回答中删除了高度并改为使用flex-basis。你还会注意到其他一些调整。

更改：

（1）

<div class="green-border" style="flex: 1 1 auto; display: flex; flex-direction: row; width: 100%; height: 100%;" >

要

<div class="green-border" style="flex: 1 1 100%; display: flex; flex-direction: row; width: 100%;" >

备注：已删除height;使用flex-basis代替;

（2）

<div style="flex: 1 1 auto; width: 100%; height: 100%;">

要

<div style="flex: 1 1 100%; width: 100%; display: flex;">

备注：已删除height;使用flex-basis代替;建立嵌套的flex容器;

（3）

<div style="background-color: #ff6500; width: 100%; height: 100%;">center</div>

要

<div style="background-color: #ff6500; width: 100%; flex: 1 1 100%;">center</div>

备注：已删除height;使用flex-basis代替;添加了flex属性;

最后，由于输入错误，蓝色边框没有显示。

（4）

clsas="blue-border"

要

class="blue-border"

通过上述调整，Chrome中的布局呈现如下：

所有盒子都放在容器内。

DEMO

将100％高度应用于嵌套的非柔性元素

在大多数情况下，在子元素上使用百分比高度时，还必须为父元素和所有祖先元素指定百分比高度，直至并包括根元素。

html, body { height: 100%; }

我在这里解释了原因：

Working with the CSS height property and percentage values

但仔细观察spec会发现一个异常：

百分比是根据高度来计算的生成的框包含块。如果含有的高度未明确指定块（即，它取决于内容高度），这个元素并不是绝对定位的值计算'自动'。

注意部分： ...并且元素没有绝对定位。

因此，请在“中心”框中试试：

更改：

（5）

<div style="background-color: #ff6500; width: 100%; flex: 1 1 100%;">center</div>

要

<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>

注意：

添加position: relative以建立最接近绝对定位的祖先

创建了新的嵌套非Flex div容器

使用div将绝对定位应用于新的height: 100%。

使用绝对定位，您无需将百分比高度应用于父容器。

DEMO

Answer 2

问题是你的边框会使div大于100％，导致它弹出。尝试让你的孩子div小于100％，比如99％。这应该可以解决您的问题。

在Chrome中，身高100％的身体溢出身体

2 个答案:

将100％高度应用于嵌套的非柔性元素