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

Question

I wanted the social media icons to be visible without scrolling. This has worked before, is there a reason it's not? It doesn't seem to be the images taking up space.

I placed min-height:100vh on.container, HTML and body tag I didn't see any results. I changed the size height images and that also didn't get my desired result.

 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

Change your slider image height to 630px. It should place the whole container within 100vh. #slider { height: 630px } . Another tip: If you are using flexbox. You don't need absolute positioning for footer in this case.