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作为高度。它将采用视口高度，即设备的高度。

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

3 个答案: