Here is a simple example I created for demonstration: http://jsfiddle.net/8nbpehj3/37/
<html>
<body>
<div class='wrapper'>
<div class='nav'>
<div class='button'>Button</div>
</div>
<div id='chart'></div>
</div>
</body>
</html>
.wrapper {
width: 100vw;
height: 100%;
}
.nav {
height: 40px;
background-color: red;
}
.chart {
width: 100%;
height: 100%;
}
At the top, there's a red navigation bar and below it, there is an area where I want to display a chart. However, currently the chart extends beyond the available space, causing unnecessary scrolling.
Could someone please advise me on how to make the chart fill the available space correctly?