Css Div应填充父级高度

我试图让一个DIV用纯CSS填充它的整个父容器<代码>高度：100%不起作用，父项上的flexbox或

显示：表格

也没有帮助：(

在所附的代码中，我们讨论的是最里面的部分

div.codemirr

问题发生在MacOS上的最新Safari中。在Chrome中一切正常。

html，主体，#根{
保证金：0；
填充：0；
身高：100%；
}
.App{
显示器：flex；
柔性流动：柱；
身高：100%；
}
离婚编辑收信人{
flex:1自动；
显示器：flex；
边缘底部：1米；
}
分区反射镜{
填充物：5px；
宽度：100%；
背景色：#ddf；
}
.CodeMirror{
身高：100%；
边框：1px实心#ccc；
}

侧栏
应该填充浅蓝色区域

只需在

上添加
高度：100%
。CodeMirror

（导致此功能无法正常工作）

因此，您需要将

display:flex

添加到

.codemirr

父级，将

flex:1

添加到子级

html，主体，#根{边距：0；填充：0；高度：100%；}
.App{display:flex；flex-flow:column；height:100%；}
div.editorContainer{flex:1自动；显示：flex；页边距底部：1em；}
div.ReactCodeMirror{填充：5px；宽度：100%；背景色：#ddf；显示：flex；}
.codemirr{border:1px solid#ccc；flex:1；}

侧栏
应该填充浅蓝色区域

首先，CodeMirror的类声明有问题，根据您的代码，它要求div包含cm-s-robocom的子类，即：

<div class="CodeMirror cm-s-robocom">Should fill light blue area</div>

在safari中为我修正的是增加高度：editorContainer和ReactCodeMirror的100%：

div.editorContainer {flex: 1 1 auto; display: flex; margin-bottom: 1em;height:100%;}
div.ReactCodeMirror {padding: 5px;  width: 100%; background-color: #ddf;height:100%;}

最后一个片段是-我认为您还应该在侧栏上添加100%的高度，使其看起来正常：

html，主体，#根{边距：0；填充：0；高度：100%；}
.App{display:flex；flex-flow:column；height:100%；}
div.editorContainer{flex:1自动；显示：flex；页边距底部：1em；}
div.ReactCodeMirror{填充：5px；宽度：100%；背景色：ddf；显示：flex；flex:1；}
.code镜像{边框：1px实心#ccc；显示：flex；flex:1；}

侧栏
应该填充浅蓝色区域

这应该行得通

div.CodeMirror{height: 100%;}

---

同时使

.ReactCodeMirror

显示：flex。@CBroe:没有帮助（MacOS上最新的Safari）可能的重复：啊……当我试图简化发布的代码时，这就搞砸了，我只从HTML中删除了这个类，但忘了从CSS选择器中删除它。我现在已经修复了。但是无论如何，

高度：100%

在

上。CodeMirror

不起作用。在Firefox和Chrome上对我有效。在Chrom中有效e、 不适用于最新的Safari。其他样式可能会产生影响（整个过程包括引导），但如果需要，它们可以被重写。当您将

flex:1 auto

添加到

.ReactCodeMirror

时会发生什么情况？它没有任何效果True…当我试图简化代码以将其发布到此处时，出现了混乱，我仅从HTML中删除了该类，但忘了从CSS选择器中删除它。我现在修复了该问题。但是无论如何，

高度：100%

在

上。CodeMirror

并没有起作用。你在哪个浏览器上测试这个？在chrome上，一切似乎都正常，唯一不同的是你之前设置的填充。在OS X Sierra上，Safari 10.0.2在Safari上也正常，也许我遗漏了什么？右侧填充了一切，你在说什么页脚间距？很有趣。当我在上面的问题中单击“运行代码片段”时，我可以在Safari中重现该问题。蓝色区域内的div（文本“应填充…”）仅与文本一样高，但它应填充整个浅蓝色区域（填充除外）

div.CodeMirror{height: 100%;}