Flex vertical layout

Hi

I have been very impressed with MDB bootstap so far - been using it about a week. However i have a problem.

In the example templates there is one called signup-page.html and it has css code as follows.

html,
body,
header,
.view {
  height: 100%;
}

@media (min-width: 851px) and (max-width: 1440px) {
  html,
  body,
  header,
  .view {
    height: 850px;
  }
}

@media (min-width: 800px) and (max-width: 850px) {
  html,
  body,
  header,
  .view {
    height: 1000px;
  }
}

@media (min-width: 451px) and (max-width: 740px) {
  html,
  body,
  header,
  .view {
    height: 1200px;
  }
}

@media (max-width: 450px) {
  html,
  body,
  header,
  .view {
    height: 1400px;
  }
}

This seems to set the height to a specific height based on the device width - i can see that this then helps with vertically aligning the main bootstrap "card".

The problem is i am wanting to do something similar on a dynamic page that i don't know the height of - depending on the text generated on the page it could vary quite a lots.

The page in question is

https://app.scorecardmarketing.com/_materialmockup/report.html

If you view on mobile you should see the problem. can anyone advise how i can make this card vertically aligned to the center of the screen on desktop yet appear properly on mobile?

thanks Stephen