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

Question

您好，我有一个问题，但我在这里找不到合适的答案。我正在制作一个简单的投资组合网站，其中包含幻灯片。幻灯片有箭头以及下方的那些小点/数字，用于选择要转到的照片。我现在正在尝试使框(“主要”)适合屏幕的高度，以便我的幻灯片显示响应(屏幕底部的箭头而不是当您缩小屏幕时在两侧的箭头)。但是，我遇到了很多麻烦!不知何故，我的 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

请阅读此内容。

高度:100vh = 视口(viewport)高度的 100%

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

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

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

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

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