如果我以像素为单位设置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>
发布于 2018-08-14 04:40:41
对其使用视图高度100%
.slider-area {
高度: 100vh;
}
发布于 2018-08-14 05:23:27
要将元素的高度设置为100%,需要将该元素的高度设置为100%,其中body和html元素的高度分别为100%和100%
https://stackoverflow.com/questions/51830191
复制相似问题