响应高度不起作用，无法找到正确答案

Question

您好，我有一个问题，但我在这里找不到合适的答案。我正在制作一个简单的投资组合网站，其中包含幻灯片。幻灯片有箭头和下面的小 dots/numbers 来选择要转到的照片。我现在正在尝试使框 ("main") 适合屏幕的高度，以便我的幻灯片显示响应（当您缩小屏幕时，箭头位于屏幕底部而不是两侧）。但是，我遇到了很多麻烦！不知何故，我的 main 比屏幕的高度还大，所以总是会出现一个滚动条。我不知道如何解决这个问题。如何让我的主屏幕达到屏幕的全高？在移动设备上它甚至连半屏都不到，在我的笔记本电脑上它太大了...

.menu {
 width:10%;
 border: 1px solid red;
}

.main {
  max-width:100%; 
  width: 90%;
  display: inline-block;
  float: right;
  border: 1px solid red;

}

<main> 
 <div class="main">
<div class="slideshow-container">

<!-- Full-width images with number and caption text -->
  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="3D/ogen.jpg" id="ogen">
  </div>

 <!-- The dots/circles -->
<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span> 
</div> 
  
  <!-- Next and previous buttons -->
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<br>


 </div> 
 
 </main>

顺便说一句，我才刚刚开始，如果这是一个很容易解决的非常简单的问题，我深表歉意。我只是想不通。

Answer 1

您可以将 height: 100vh; 添加到 CSS .main class 以确保您的 div 将占据整个视口高度

Answer 2

使用100vh作为高度。它将采用视口高度，即设备高度。

Answer 3

请阅读此内容。

height: 100vh = 视口高度的 100%

height: 100% = 父元素高度的 100%

这就是为什么您需要在 html 和 body 上添加 height: 100%，因为默认情况下它们没有尺寸

您必须知道的事情：如果您使用 % 作为垂直边距或填充，% 将根据父元素的宽度而不是高度计算。

提示：尝试对字体大小使用 vh 和 vw 单位 :) 我喜欢这个（我知道某些浏览器不支持）：font-size: calc(.5vh + .5vw);（例如）

在此处查看 CSS 单元的漂亮页面：http://css-tricks.com/the-lengths-of-css/

响应高度不起作用，无法找到正确答案

responsive height doesnt work and cant find the correct answer

html

css

slideshow

portfolio