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

Question

嗨，我有一个问题，我无法找到一个适用于此的答案。我正在制作一个带幻灯片的简单投资组合网站。幻灯片显示箭头以及下方的小点/数字以选择要转到的照片。我现在试图使盒子（“主”）适合屏幕的高度，以便我的幻灯片响应（当你使屏幕变小时，屏幕底部的箭头而不是侧面的箭头）。但是，我有很多麻烦！不知怎的，我的主要比屏幕的高度大，所以总会出现一个滚动条。我不知道怎么解决这个问题。如何让我的主屏幕完整高度？在移动设备上它甚至不是半屏幕，而在我的笔记本电脑上它太大了......

.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 =视口高度的100％

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

这就是为什么你需要在height: 100%和html上添加body，因为它们默认没有大小

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

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

在这里查看CSS单位的一个不错的页面：http://css-tricks.com/the-lengths-of-css/

Answer 2

您可以将height: 100vh;添加到CSS .main类，以确保您的div将采用完整的视口高度

Answer 3

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