Question

如果我以像素为单位设置div元素的高度，则我的div元素采用height属性，并且可以完美工作。但是我想换种方式。我知道，如果我想将div元素高度设置为百分比值，则比我首先需要将我的body和html元素高度设置为百分比值。而且我做到了，但是没有用。

body, html {
  height:100%;
  
}

.navigation-area{
   background-color:#DDD;
   overflow:hidden;
   position:fixed;
   top:0;
   left:0;
   width:100%;
  
}

.navigation-area a {
  text-decoration:none;
  color:black;
  padding: 12px 16px;
  float:left
  
}

.slider-area {
  margin-top:50px;
  background-image: url(https://www.w3schools.com/w3images/parallax1.jpg);
  height: 100%;
  background-position:center;
  background-size:cover;
  background-attachment:fixed;
  background-repeat:no-repeat;
}

<div class= "main">
	<div class="navigation-area">
		<a href="#">Home</a>
		<a href="#"><i class="fas fa-user"></i>About</a>
		<a href="#"><i class="fas fa-th"></i>Portfolio</a>
		<a href="#"><i class="fas fa-envelope"></i>Contacts</a>
		<a href="#" class="right"><i class="fas fa-search"></i></a>
	</div>
	
	<div class="slider-area">
		<div class="text-area">
			<span>MY <span>WEBSITE</span>LOGO</span>
		</div>
	</div>
	
	<div class="content-area">
		<p>The example above used pixels to set the height of the image. If you want to use percent, for example 100%, to make the image fit the whole screen, set the height of the parallax container to 100%. Note: You must also </p>
	</div>

</div>

Answer 1

使用视图高度100％

.slider-area {

高度：100vh;

}

Answer 2

要设置元素的高度100％，您需要将其元素的高度100％设置为主体和html元素高度为100％的直接父元素

我已经设置了正文，即使div元素高度为100％，html元素高度为100％也不起作用

2 个答案: