Question

我试图让DIV用纯CSS填充整个父容器。 height:100%没有做到这一点，父亲的flexbox或display:table也没有帮助:(

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

问题出现在最新的MacOS Safari上。在Chrome中一切都很好。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

只需在height: 100%上添加.CodeMirror（bug in 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 2

首先，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中为我修复的是向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, 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 3

这应该有效

div.CodeMirror{height: 100%;}

Div应填充父高

3 个答案: