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

【问题标题】：Div with 100% height overflowing body in Chrome在 Chrome 中具有 100% 高度溢出体的 Div
【发布时间】：2016-01-01 22:30:17
【问题描述】：

我正在尝试按照here 和 here 的描述制作 100% 高度 flex 的孩子。在 Firefox 和 IE 中，它按预期显示，但在 chrome 中却是一团糟。 divs 正在脱离身体。这是 chrome 遵循规范的另一个副作用还是一个错误？

代码：

<!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 和 ie (11) 中的样子：

这就是它在 chome 中的样子：

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

【问题讨论】：

标签： html css flexbox

【解决方案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；已建立嵌套的弹性容器；

(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 以建立最近定位的祖先进行绝对定位
创建了新的、嵌套的、非弹性的 div 容器
将绝对定位应用到新的div 和height: 100%。

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

DEMO

【讨论】：

非常感谢您的帮助！
但我的问题是我需要让非弹性 div 具有 100% 的高度。我看到我的问题对此不够清楚。对不起。有非 flex div 的原因是我的真实网站结构非常复杂——它使用了很多 web 组件，其中一些不能使用 flex。所以在某些时候我必须停止使用 flex 并让“正常”的 div 达到 100% 的高度。为了让它工作，我需要所有父 div 都设置为 % 或其他东西的高度。从第二个链接：“但是，百分比是根据父级的 cross-size 属性的指定值计算的，而不是它的使用值。”
你总是可以在弹性项目中嵌套 div。
嗯，是的，我可以，但是如果我的父 (flex) div 没有设置高度，则它的子级高度设置为 % 将毫无用处。我错了吗？
你没有错，但该规则有一个例外。请参阅我修改后的答案。

【解决方案2】：

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

【讨论】：

谢谢你的建议！，我试过了，但它似乎没有任何效果 - 底部的东西超出了边框宽度。还有 box-sizing: border-box;...
尝试 98% 或 97%。如果这不起作用，请尝试 float:left 和 display:block。