为什么我不能使绝对div高度100％

Question

I have problem, I have one fixed container, inside them I have absolute div, I want to set .absolute div height:100%; to be full height of container div(500px). Here is what I tried to solve my problem, this need because I want to create mobile menu with toggle container, and its important for me to be height 100% of mobile phone screen.

https://jsfiddle.net/d1bh9ncs/

HTML

<div class="container">
  <div class="fixed">
    <div class="absolute">

    </div>
  </div>
</div>

CSS

.container{
  width:100%;
  height:500px;
  background-color:#ddd;
}
.fixed{
  position:fixed; 
  width:100%;
  height:50px;
  background-color:red;
  top:8px;
  left:8px;
  right:15px;
}
.absolute{
  position:absolute;
  height:100%;
  width:100%;
  background-color:green;
  top:51px;
  left:0px;
}

Answer 1

The parent div .fixed is absolutely positioned and has a height 50px. So applying height: 100% on it's child will inherit the relative height(ie 50px).

Use height: 100vh; on .absolute . I have used calculated height height: calc(100vh - 51px) to avoid scrollbar due to top: 51px .

Note : vh is 1/100th of the height of the viewport(visible webpage height).

Updated Fiddle

.absolute {
  position: absolute;
  height: calc(100vh - 51px);
  width: 100%;
  background-color: green;
  top: 51px;
  left: 0px;
}

Answer 2

you are using Fixed div as an Parent div of Absolute div, Absolute div can have 100% of Fixed div it can't extend to its parent's height if you add height value in Percentage.If you want it to extend as parent height you must have to add height in px (pixels)

.container{
  width:100%;
  height:500px;
  background-color:#ddd;
}
.fixed{
  position:fixed;
  width:100%;
  height: 101px;
  background-color:red;
  top:8px;
  left:8px;
  right:15px;
}
.absolute{
  position:absolute;
  height: 117px;
  width:100%;
  background-color:green;
  top: 0px !important;
  left:0px;
  z-index: 99999999;
  top: 50px;
}

Answer 3

Try to give height in vh. Put .absolute height = 100vh

 .absolute
 {
 position:absolute;
 height:100vh;
 width:100%;
 background-color:green;
 top:51px;
 left:0px;
}

https://jsfiddle.net/bj9wcdLs/

Answer 4

A more modern way of doing this is to use vh and vw (view height and width). Which rather than being a percentage of its parent (like %) is a percentage of the full page.

In the example below I've done some calc's to help it work out what sizes we really want things.

 example = function() { var abSel = document.querySelector(".absolute"); abSel.classList.toggle('hidden'); } 

 body { margin: 0; } .container { width: 100vw; height: 100vh; background-color: #ddd; } .fixed { position: fixed; width: calc(100vw - 16px); height: 50px; line-height: 50px; text-align: center; background-color: red; top: 8px; left: 8px; } .absolute { position: absolute; border-top: 1px solid #ddd; height: calc(100vh - 59px); width: calc(100vw - 16px); background-color: green; top: 50px; } .hidden { display: none; } 

 <div class="container"> <div class="fixed"> <button onclick="example()">Example</button> <div class="absolute hidden"></div> </div> </div> 

Hope this helps.

Answer 5

Just like sticksu said.

Change your code

.fixed{
   position:fixed; 
   width:100%;
   height:100%; //must be 100%
   background-color:red;
   top:8px;
   left:8px;
   right:15px;
}