为什么最小高度：100vh在容器上不起作用？

Question

我希望社交媒体图标在不滚动的情况下可见。这以前曾奏效，是不是有原因呢？似乎不是图像占用了空间。

我将min-height：100vh放在.container，HTML和body标签上，但没有看到任何结果。我更改了尺寸高度图像，但也没有得到我想要的结果。

html {
  height: 100%;
}

body {   
  background-color: #e2e2e2;  
  font-family: "Montserrat", sans-serif;   
  font-weight: 500; } 
  /* min height */ 
.container {  
  white-space: nowrap;  
  min-height: 100vh; 
 }

        <div class="container"><nav>

  <div class="site_header">

    <a href="index.html"><img alt="nav logo" class="logo" src="https://i.imgur.com/1SxQJfI.png"></a>
    <div class="right">
      <div class="class_button">
        <a class="">CLASSES</a>
      </div>

      <img alt="menu button" class="menu" src="https://i.imgur.com/beUooBz.png">

    </div>
</nav>

<div id="slider">
  <div class="slider_child" id="slider_child">
    <div class="image_con" style="left: 50%; opacity: 1">
      <img src="https://i.imgur.com/xvYImiF.png" class="img1" />
    </div>

    <div class="image_con" style="left: 40%; opacity: 0">
      <img src="https://i.imgur.com/hYnjyMy.png" class="img2" />
    </div>

    <div class="image_con" style="left: 40%; opacity: 0">
      <img src="https://i.imgur.com/kGZ5oCv.png" class="img3" />
    </div>
  </div>
  
  
  <!--ARROW AND TEXT ISSUE -->
  <a class="slidenext" onclick="nextSlide();">
    <img src="https://i.imgur.com/GASeP9Y.png" class="arrow_icon" />
    <div class="grow">GROW</div>
  </a>
  <a class="slideprev" onclick="prevSlide();"><img src="https://i.imgur.com/WLkS6Jk.png" class="arrow_icon" />
    <div class="shift">SHIFT</div>
  </a>
  <div class="title_holder">
    <div class="title lineheight">
      IR
    </div>

    <div class="title lineheight">
      REG
    </div>

    <div class="title">
      ULAR
    </div>

    <div class="button">
      <a class="learn_more">LEARN MORE</a>
    </div>
  </div>

</div>

<!--  footer social media and slideshow numbers-->
      <p>
      #follow us
    </p>
    <div class="footer">

      <img src="https://i.imgur.com/rCkPv9i.png alt="instagram link" class="social_icons ig" />
      <img src="https://i.imgur.com/9rmiZY1.png" alt="facebook link" class="social_icons" />
    </div>
  </div>

</div>
                                                                                         </div>
                                                           

codepen

Answer 1

将滑块图像的高度更改为630像素。它应将整个容器置于100vh之内。 #slider { height: 630px }。另一个提示：如果您使用的是flexbox。在这种情况下，您无需对页脚进行绝对定位。