i already set the body, html element height 100% even then div element height 100% is not working

Question

If i set the div element height in pixels then my div element taking height property and its working perfectly. But i want it other way . I know that if i want to set my div element height in as percentage value than i first need to set my body and html element height in percentage value. And i did but it's not working.

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>

missing height:100% on `.main` – Temani Afif Aug 13 '18 at 21:40 — Temani Afif, Aug 13 '18 at 21:40

Raw Scripter · Answer 1 · 2018-08-13T20:45:44.453

0

Use view height 100% for it

.slider-area {

height: 100vh;

}

edited Aug 13 '18 at 20:45

answered Aug 13 '18 at 20:40

Raw Scripter

113
1
12

thank you , but i saw same code working in w3school websites. why mine's not working? – user6787493 Aug 13 '18 at 20:43
please try this. previous one was my mistake. i apologize for it :) – Raw Scripter Aug 13 '18 at 20:46
okay, but can you tell me why is this one working
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_parallax_percent – user6787493 Aug 13 '18 at 20:49
yes you can see they did a inline css there
that's why its working there.
– Raw Scripter Aug 13 '18 at 20:52
yes i can see but i think you didn't got the problem, i have nothing to with my content-area div element. My problem and the question is why my slider-area div is not taking 100% height value – user6787493 Aug 13 '18 at 20:56
oh i see.. You can set the hight value depending on the user device view hight by adding height: 100vh.... – Raw Scripter Aug 13 '18 at 21:01
but why it's not working in my code. it's working perfectly in w3school website – user6787493 Aug 13 '18 at 21:08
1

i believe i have found the problem. it says "to make the image fit the whole screen, set the height of the parent container to 100%." my slider-area div element immediate parent container is main div element. that's why i need to set height property of that element first :) thank you @Raw Scripter for giving a try – user6787493 Aug 13 '18 at 21:19
awesome. welcome dude :) – Raw Scripter Aug 13 '18 at 21:21

score 0 · Answer 2 · answered Aug 13 '18 at 21:23

0

to set the height 100% of a element you need to set height 100% of that element immediate parent element with body and html element height 100%

answered Aug 13 '18 at 21:23

user6787493

33
6

i already set the body, html element height 100% even then div element height 100% is not working

2 Answers2