Div应填充父级高度

我正在尝试使DIV使用纯CSS填充其整个父容器。 height:100%没有做到这一点，在父Flexbox的或display:table也没有帮助:(Div应填充父级高度

在所附的代码中，我们谈论的最里面 div.CodeMirror

在最新的Safari浏览器上出现的问题MacOS的。在Chrome中所有的罚款。

html, body, #root {margin: 0; padding: 0; height: 100%; } 
 
.App {display: flex; flex-flow: column; height: 100%; } 
 
div.editorContainer {flex: 1 1 auto; display: flex; margin-bottom: 1em;} 
 
div.ReactCodeMirror {padding: 5px; width: 100%; background-color: #ddf;} 
 
.CodeMirror {height: 100%; border: 1px solid #ccc;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div id="root"> 
 
    <div class="App"> 
 
    <nav class="navbar navbar-default"></nav> 
 
    <div class="editorContainer"> 
 
     <div style="background-color: #aaf; width: 160px;">Side bar</div> 
 
     <div class="ReactCodeMirror"> 
 
     <div class="CodeMirror">Should fill light blue area</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-02-13 travelboy

制作'.ReactCodeMirror'' display：flex'。 – CBroe

@CBroe：没有帮助（MacOS上的最新的Safari） – travelboy

可能的重复：http://stackoverflow.com/q/33636796/3597276 –

首先，什么是错与CodeMirror的类声明，根据你的代码，它需要在div包含的CM-S-robocom，即一个子类：

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

如果你想这个CSS声明要么.CodeMirror或.CM-S-robocom，你应该使用之间的逗号：

.CodeMirror, .cm-s-robocom {height: 100%; border: 1px solid #ccc;}

什么固定它，我在Safari中增加高度：100％都editorContainer和ReactCodeMirror：

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％的侧边栏上使它看起来OK：

html, body, #root {margin: 0; padding: 0; height: 100%; } 
 
.App {display: flex; flex-flow: column; height: 100%; } 
 
div.editorContainer {flex: 1 1 auto; display: flex; margin-bottom: 1em;} 
 
div.ReactCodeMirror {padding: 5px; width: 100%; background-color: #ddf; display: flex; flex: 1 1; } 
 
.CodeMirror {border: 1px solid #ccc; display: flex; flex: 1 1; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
     
 
    <div id="root"> 
 
    <div class="App"> 
 
    <nav class="navbar navbar-default"></nav> 
 
    <div class="editorContainer"> 
 
     <div style="background-color: #aaf; width: 160px; top: 0; bottom: 0; position: relative;">Side bar</div> 
 
     <div class="ReactCodeMirror"> 
 
     <div class="CodeMirror">Should fill light blue area</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-02-13 12:34:29 unkgd

真的......当我试图简化在这里发布代码的代码时，这个问题就搞砸了，我只从HTML中删除了这个类，但是却忘了从CSS选择器中删除它。我现在解决了。但是无论如何，'.CodeMirror'上的'height：100％'并不能解决问题。 – travelboy

您正在测试哪个浏览器？在chrome上一切似乎都很好，唯一不同的是你之前设置的填充。 – unkgd

OS X Sierra上的Safari 10.0.2 – travelboy

刚上.CodeMirror添加height: 100%（bug in Safari原因这不行亲perly）

因此，您需要将display: flex添加到.CodeMirror父母，flex: 1给孩子。

html, body, #root {margin: 0; padding: 0; height: 100%; } 
 
.App {display: flex; flex-flow: column; height: 100%; } 
 
div.editorContainer {flex: 1 1 auto; display: flex; margin-bottom: 1em;} 
 
div.ReactCodeMirror {padding: 5px; width: 100%; background-color: #ddf; display: flex;} 
 
.CodeMirror {border: 1px solid #ccc; flex: 1;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div id="root"> 
 
    <div class="App"> 
 
    <nav class="navbar navbar-default"></nav> 
 
    <div class="editorContainer"> 
 
     <div style="background-color: #aaf; width: 160px;">Side bar</div> 
 
     <div class="ReactCodeMirror"> 
 
     <div class="CodeMirror">Should fill light blue area</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-02-13 12:34:13 pol

啊......当我试图简化发布它的代码时，在这里，我只从HTML中删除了该类，但忘记从CSS选择器中删除它。我现在解决了。但是无论如何，'.CodeMirror'上的'height：100％'并不能解决问题。 – travelboy

适用于Firefox和Chrome。 – pol

适用于Chrome，不适用于最新的Safari。其他样式可能会有效果（整个事情包括引导），但如果需要可以覆盖它们。 – travelboy

这应该工作

div.CodeMirror{height: 100%;}

来源

2017-02-13 12:34:50

，并且它在Safari中不起作用。 – travelboy

Div应填充父级高度

回答

相关问题