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應填充父級高度

回答

相關問題