将图像高度设置为 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-header {

  background: red;

  color: white;

}

#content-main {

  background: blue;

  color: white;

  min-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 2

您希望整个布局的高度为 100%，而不仅仅是#content-main.

因此，您要在 上设置min-height:100vh( ) 。然后，将允许 main 填充 nav 和 footer 之间的高度：min-vh-100#contentflex-grow-1

<div id="app">

    <div id="content" class="d-flex flex-column min-vh-100">

        <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 overflow-auto">

            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>

https://codeply.com/p/gnLCSZG9gy

Answer 3

试试这个代码。我向图像添加了 max-width: 100% 和 height: auto

  #content-header {

        background:red;

        color:white;

      }

      #content-main {

        background:blue;

        color:white;

        height:100vh;

      }

      #content-header {

        background:red;

        color:white;

      }

            #background-img{

                max-width: 100%;

                height: auto;

            }

<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 id="background-img" class="img-fluid" src="https://placeimg.com/1000/1000/any">

        </main>

        <div id="footer" class="p-4">

        

          Footer Content

  

        </div>

      </div>

    </div>

Answer 4

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