时间戳

首页 > 解决方案 > 为什么 min-height:100vh 在容器上不起作用？

html - 为什么 min-height:100vh 在容器上不起作用？

问题描述

我希望无需滚动即可看到社交媒体图标。这以前有效，有没有原因呢？它似乎不是占用空间的图像。

我将 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>

密码笔

标签： htmlcss

解决方案

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

推荐阅读