将图像高度设置为 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 {&nbsp; background: blue;&nbsp; color: white;&nbsp; min-height: 100vh;}#content-header {&nbsp; background: red;&nbsp; color: white;}#content-main {&nbsp; background: blue;&nbsp; color: white;&nbsp; min-height: 100vh;}#content-header {&nbsp; background: red;&nbsp; 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">&nbsp; <div id="content" class="d-flex flex-column">&nbsp; &nbsp; <nav id="content-header" class="p-4">&nbsp; &nbsp; &nbsp; <div class="navContent d-flex justify-content-between">&nbsp; &nbsp; &nbsp; &nbsp; Navbar&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </nav>&nbsp; &nbsp; <main id="content-main" class="flex-grow-1 p-5">&nbsp; &nbsp; &nbsp; Main Content&nbsp; &nbsp; &nbsp; <img class="img-fluid" src="https://placeimg.com/1000/1000/any">&nbsp; &nbsp; </main>&nbsp; &nbsp; <div id="footer" class="p-4">&nbsp; &nbsp; &nbsp; Footer Content&nbsp; &nbsp; </div>&nbsp; </div></div>

Answer 2

您希望整个布局的高度为 100%，而不仅仅是#content-main.因此，您要在 上设置min-height:100vh( ) 。然后，将允许 main 填充 nav 和 footer 之间的高度：min-vh-100#contentflex-grow-1<div id="app">&nbsp; &nbsp; <div id="content" class="d-flex flex-column min-vh-100">&nbsp; &nbsp; &nbsp; &nbsp; <nav id="content-header" class="p-4">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="navContent d-flex justify-content-between"> Navbar </div>&nbsp; &nbsp; &nbsp; &nbsp; </nav>&nbsp; &nbsp; &nbsp; &nbsp; <main id="content-main" class="flex-grow-1 p-5 overflow-auto">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Main Content&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img class="img-fluid" src="https://placeimg.com/1000/1000/any">&nbsp; &nbsp; &nbsp; &nbsp; </main>&nbsp; &nbsp; &nbsp; &nbsp; <div id="footer" class="p-4"> Footer Content </div>&nbsp; &nbsp; </div></div>https://codeply.com/p/gnLCSZG9gy

Answer 3

试试这个代码。我向图像添加了 max-width: 100% 和 height: auto&nbsp; #content-header {&nbsp; &nbsp; &nbsp; &nbsp; background:red;&nbsp; &nbsp; &nbsp; &nbsp; color:white;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; #content-main {&nbsp; &nbsp; &nbsp; &nbsp; background:blue;&nbsp; &nbsp; &nbsp; &nbsp; color:white;&nbsp; &nbsp; &nbsp; &nbsp; height:100vh;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; #content-header {&nbsp; &nbsp; &nbsp; &nbsp; background:red;&nbsp; &nbsp; &nbsp; &nbsp; color:white;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #background-img{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; max-width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: auto;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<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">&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; <div id="content" class="d-flex flex-column">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <nav id="content-header" class="p-4">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="navContent d-flex justify-content-between">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Navbar&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </nav>&nbsp; &nbsp; &nbsp; &nbsp; <main id="content-main" class="flex-grow-1 p-5">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Main Content&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img id="background-img" class="img-fluid" src="https://placeimg.com/1000/1000/any">&nbsp; &nbsp; &nbsp; &nbsp; </main>&nbsp; &nbsp; &nbsp; &nbsp; <div id="footer" class="p-4">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Footer Content&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>

Answer 4

你的问题是对的。因为您设置了主要内容高度 100vh，但如果您观察到图像尺寸大于屏幕高度。您的屏幕尺寸为 700 像素到 800 像素，但图像尺寸为 1000 像素。所以你的图像与页脚重叠。