问我已经设置了正文，html元素高度100%甚至div元素高度100%都不起作用

EN

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>