div 应填充父级高度

Question

我正在尝试让DIV用纯CSS填充其整个父容器。 height:100%没有这样做，父项上的弹性框或display:table也无济于事:(

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

该问题出现在MacOS上的最新Safari中。在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>

Answer 1

首先，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% 以使其看起来正常：

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>

Answer 2

只需在.CodeMirror上添加height: 100%(Safari 中的错误会导致它无法正常工作(

因此，您需要将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>

Answer 3

这

应该有效

div.CodeMirror{height: 100%;}