Make block height take the rest of the viewport?

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,

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