将图像高度设置为 100vh 会导致与其他元素重叠

Question

我正在尝试使用 Bootstrap 4 创建一个具有页眉、页脚和主要内容的页面。主要内容应填充页眉下方的空间，页脚应位于其下方。

我尝试通过在主要内容上设置 100vh 高度来做到这一点，这可行，但是当我插入图像时，它与页脚重叠。我哪里错了？为什么图像没有调整大小？

#content-header {
  background: red;
  color: white;
}

#content-main {
  background: blue;
  color: white;
  height: 100vh;
}

#content-header {
  background: red;
  color: white;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div id="app" class="h-100">
  <div id="content" class="d-flex flex-column">
    <nav id="content-header" class="p-4">
      <div class="navContent d-flex justify-content-between">
        Navbar
      </div>
    </nav>
    <main id="content-main" class="flex-grow-1 p-5">
      Main Content
      <img class="img-fluid" src="https://placeimg.com/1000/1000/any">
    </main>
    <div id="footer" class="p-4">
      Footer Content
    </div>
  </div>
</div>

Answer 1

添加min-height插入的height

#content-main {
  background: blue;
  color: white;
  min-height: 100vh;
}

#content-main {
  background: blue;
  color: white;
  min-height: 100vh;
}

#content-header {
  background: red;
  color: white;
}

#content-main {
  background: blue;
  color: white;
  min-height: 100vh;
}

#content-header {
  background: red;
  color: white;
}