Make block height take the rest of the viewport?

Questions
1

Hi there,

I have a page in portrait mode which needs to split to two blocks:

  1. Upper block: has mostly fixed height (depending on ios/md theme distinction only), containing kind of summary description)
  2. Lower block: should take “all the rest space in the viewport”: containing a chart.js responsive graph

Should I use the F7 responsive grid to make this, or there’s some css trick which can do this?

Thanks for any help,
Bálint

2

Use CSS calc(). So If top block is 100px, then bottom can be calc(100% - 100px)