即使内容较少也保持视口高度

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>