Chart Div 100％窗口高度

Question

所以我有一個chartist.js圖表​​，我不想填滿整個頁面。事情是，它應該填充相對於父容器的高度。所以，如果我添加一個兄弟div到圖表div，它仍然不會溢出窗口大小。

這裏有一個小提琴：https://jsfiddle.net/dckuLxyf/

我的繼承人HTML和JavaScript：

<div class="container fill"> 
    <div><h1>My Chart</h1></div> 
    <div class="ct-chart ct-perfect-fourth my-chart"></div> 
</div> 

<script> 
    var data = { 
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'], 
    series: [ 
     [5, 2, 4, 2, 0] 
    ] 
    }; 

    new Chartist.Line('.ct-chart', data); 
</script> 

這裏是我的CSS：

html { 
    height: 100%; 
    background-color: blue; 
} 

body { 
    height: 100%; 
    background-color:pink; 
} 

.fill { 
    min-height: 100%; 
    height: 100%; 
    background-color: green; 
} 

.my-chart { 
    height: 100%; 
    min-height: 100%; 
    background-color:yellow; 
} 

如果我刪除了H1的div我得到了我想要的行爲，但我也希望在它之上有H1，並且仍然以相同的方式行事（不在屏幕下方溢出）我如何實現這一目標？我試圖改變每個div的位置，但沒有任何運氣。我想我錯過了在這種情況下定位如何工作的細節？

Answer 1

你可以使用Flex幫助保持一切融合在一起：https://jsfiddle.net/dckuLxyf/4/

html { 
    height: 100%; 
    background-color: blue; 
} 

body { 
    height: 100%; 
    background-color:pink; 
} 

.fill { 
    min-height: 100%; 
    height: 100%; 
    background-color: green; 
    display:flex; 
    flex-flow:column; 
} 

.my-chart { 
    flex:1 1 0; 
    overflow:hidden; 
    background-color:yellow; 
}