Позиция абсолютная высота 100% от фиксированного родителя

Question

На моем веб-сайте у меня есть фиксированный родитель с абсолютным ребенком. Как установить высоту ребенка равным с родителем?

Я не могу использовать JS и менять положение родителя. Вот код:

.sidebar { 
    position:fixed; 
    width: 240px; 
    left: 0; 
    top: 0; 
    height: 100%; 
    overflow:hidden; 
    background-image: url(img/sidebar.jpg); 
} 

.sidebar:before { 
    width: 100%; 
    display: block; 
    content: ""; 
    position: absolute; 
    height: 100%; 
    top: 0; 
    left: 0; 
    z-index: -1; 
    background: rgba(0,0,0,0.9); 
} 

Проблема заключается в том, что ребенок получить высоту 100% экрана, а не родитель, так что если я прокручиваю вниз, ребенок не полный

Answer 1

Попробуйте следующий код для веба страницы или посмотреть на codepen http://codepen.io/santoshkhalse/pen/oYyLqO

body, html{ 
 
    height:100%; 
 
    width:100% 
 
} 
 

 
.sidebar { 
 
    position:fixed; 
 
    width: 240px; 
 
    left: 0; 
 
    top: 0; 
 
    height: 100%; 
 
    overflow:hidden; 
 
    background-image: url("http://www.intrawallpaper.com/static/images/518164-backgrounds.jpg"); 
 
} 
 

 
.sidebar:before { 
 
    width: 100%; 
 
    display: block; 
 
    content: ""; 
 
    position: absolute; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: -1; 
 
    background:green;; 
 
}

<div class="sidebar"> 
 
</div>

Answer 2

.sidebar:before { 
    width: 100%; 
    display: block; 
    content: ""; 
    position: absolute; 
    height: 100%; 
    top: 0; 
    left: 0; 
    right:0; 
    bottom:0; 
    z-index: -1; 
    background: rgba(0,0,0,0.9); 
}