时间戳

首页 > 解决方案 > 响应高度不起作用，无法找到正确答案

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

问题描述

嗨，我有一个问题，我在这里找不到适用的答案。我正在制作一个带有幻灯片的简单作品集网站。幻灯片有箭头和下面的小点/数字，可以选择要查看的照片。我现在试图使框（“主”）适合屏幕的高度，以便我的幻灯片具有响应性（当您缩小屏幕时，箭头位于屏幕底部而不是侧面）。但是，我遇到了很多麻烦！不知何故，我的主屏幕比屏幕的高度大，所以总会出现一个滚动条。我不知道我该如何解决这个问题。如何使我的主屏幕占据屏幕的整个高度？在手机上它甚至不是半屏，在我的笔记本电脑上它太大了......

.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>

我刚刚开始顺便说一句，对不起，如果这是一个很容易解决的简单问题。我就是想不通。

标签： htmlcssslideshowportfolio

解决方案

请阅读这个。

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

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

这就是为什么您需要添加and height: 100%，因为默认情况下它们没有大小htmlbody

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

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

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

推荐阅读