So i have a chartist.js chart, that I wan't to fill the whole page hight. The thing is, that it should just fill the height, relative to the parent container. So if I add a sibling div to the chart div, it should still not overflow the window size.
Here's a fiddle: https://jsfiddle.net/dckuLxyf/
Heres my html and 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>
Here's my 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;
}
If I remove the h1 div I get the behaviour I want, but I would also like to have the H1 on top of it, and still behave the same way (not overflowing below the screen) How do i accomplish this? I have tried changing the positioning of each div, but without any luck. I think i'm missing the detail in how positioning works in this case?
You could use flex to help hold everything together : 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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.