在 Chrome 中具有 100% 高度溢出主体的 Div

Question

在 Chrome 中具有 100% 高度溢出主体的 Div

我正在尝试按照此处和此处的描述制作 100% 高度 flex 的孩子。在 Firefox 和 IE 中，它按预期显示，但在 chrome 中，它搞砸了。div 正在脱离身体。这是 chrome 遵循规范对 T 恤的另一个副作用还是仍然是一个错误？

编码：

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

Run Code Online (Sandbox Code Playgroud)

plnkr：http: //run.plnkr.co/plunks/wi5MQYK5yEdzdgQBaUWh/

这就是它在 ff 和 ie (11) 中的样子：

这就是它在 chome 中的样子：

更新：“中心” div 应该是非弹性 div，并且仍然必须具有 100% 的高度。之所以有非 flex div，是因为我的真实站点结构非常复杂——它使用了很多 webcomponents，其中一些只是不能使用 flex。所以在某些时候，我必须停止使用 flex 并让“正常”div 具有 100% 的高度。

Answer 1

Mic*_*l_B 6

问题似乎源于您将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改为使用；建立嵌套的弹性容器；

(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 中呈现如下：

所有的盒子都放在它们的容器里。

演示

将 100% 高度应用于嵌套的非 flex 元素

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

html, body { height: 100%; }

Run Code Online (Sandbox Code Playgroud)

我在这里解释了原因：

使用 CSSheight属性和百分比值

但是仔细查看规范会发现一个例外：

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

注意部分：... 并且元素不是绝对定位的。

因此，在“中心”框上试试这个：

改变：

(5)

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

Run Code Online (Sandbox Code Playgroud)

到

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

Run Code Online (Sandbox Code Playgroud)

笔记：

添加position: relative以建立最近的定位祖先以进行绝对定位
创建新的、嵌套的、非弹性div容器
应用绝对定位到新的div有height: 100%。

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

演示

归档时间：	10 年，2 月前
查看次数：	4952 次
最近记录：	9 年，9 月前