Почему я не могу сделать абсолютную высоту div 100%

Question

У меня проблема, у меня есть один фиксированный контейнер, внутри них у меня есть абсолютный div, я хочу установить .absolute div height:100%;, чтобы быть полной высотой контейнера div (500 пикселей). Вот что я пытался решить свою проблему, эта необходимость, потому что я хочу создать мобильное меню с контейнером для переключения, и его важно для меня быть 100% экрана мобильного телефона.

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

Родитель ДИВ .fixed абсолютно позиционирован и имеет высоту 50px. Поэтому применение height: 100% на его дочернем носителе будет наследовать относительную высоту (то есть 50 пикселей).

Используйте height: 100vh; на .absolute. Я использовал расчетную высоту height: calc(100vh - 51px), чтобы избежать полосы прокрутки из-за top: 51px.

Примечание: vh - 1/100-я высота видового экрана (высота видимой страницы).

Updated Fiddle

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

Answer 2

Try, чтобы дать высоту в ВХ. Помещенный .absoluteheight = 100vh

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

https://jsfiddle.net/bj9wcdLs/

Answer 3

Так же, как sticksu сказал.

Изменить код

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

Answer 4

вы используете Fixed DIV как родительский DIV Абсолютного DIV, Absolute DIV может иметь 100% фиксированного DIV не может распространяться на высоту своего родителя, если добавить значение высоты в Percentage.If вы хотите, чтобы простираться родительской высоту вы должны добавить высоту в рх (пикселы)

.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 5

более современный способ сделать это состоит в использовании VH- и фольксвагена (высоту вида и ширину). Который, а не процент от его родителя (например,%), составляет процент от полной страницы.

В приведенном ниже примере я сделал несколько выемок, чтобы помочь им определить, какие размеры мы действительно хотим.

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>

Надеется, что это помогает.