Сохранение высоты окна просмотра даже с меньшим содержанием

Question

Требуется, чтобы область содержимого всегда была минимальной, а высота порта просмотра - еще меньше.также он может быть увеличен, а нижний колонтитул может быть добавлен больше контента.как получить это из подхода макета начальной загрузки?

вот моя попытка:

<div class="container-fluid">
  <header id="page-hero" class="site-header">
    <nav class="site-nav navbar navbar-expand-md navbar-dark bg-secondary">
      <div class="container-fluid">
        <button type="button" class="navbar-toggler"
                data-toggle="collapse" data-target="#iboToggleNavi"
                aria-controls="#iboToggleNavi" aria-label="ibo Toggle Navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <a href="#page-hero" class="navbar-brand">IBO</a>
    </nav>
  </header>
  <div class="content vh-100" style="background: green">
    //but height is more than the view port even less content!?
  </div>
  <footer class="container-fluid">
    <p> &nbsp; &copy; Company 2017-2018</p>
  </footer>
</div>