Установка высоты в% от его родителя с высоты: авто

Question

I wrote this codepen that does not work.

HTML

<div class="a"> 
<div class="b"> variable content length variable content length variable content length variable content length variable content length variable content length variable content length 
    <div class="c"> </div> 
    </div> 
</div> 

CSS

.a{ 
    height: 500px; 
    width: 70px; 

} 

.c{ 
    height: 50%; 
    background-color: red; 
    display: inline-block; 
} 

а является просто контейнер Ь содержание DIV с переменным содержанием размер.

есть ли способ сделать это? c может иметь все, что угодно position. Но: .c должен быть в два раза меньше его переменной родительского

Answer 1

Дайте высоту b тоже:

.b { 
    height: 100%; 
} 

Чтобы установить высоту элемента в%, его родитель должен иметь свойство высоты тоже (в px или в% (то же правило, если оно%)).

Если высота динамическая, установите для свойства переполнения a-элемента значение auto.

Answer 2

Рабочее решение . Заметьте, я изменил некоторые цвета для ясности, извините за это.

http://codepen.io/anon/pen/WrvLJv

.a{ 
    height: 500px; 
    width: 70px; 
    background:blue; 
    overflow-y:hidden; 
} 

.b{ 
    width:100%; 
    background:grey; 
    position:relative; 
} 

.c{ 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height: 50%; 
    background-color: red; 
    display: inline-block; 
    z-index:99999; 
} 

Изменения, внесенные:

1. Добавлены position:relative к .b и position:absolute к .c, в то время как позиционирование .c на верхнем левом углу.

2. Добавлен width и height из, соответственно, 100% и 50% к .c.

Если я правильно помню, остальное предназначено только для демонстрационных целей. Надеюсь, я понял ваш вопрос и помог. Кстати, попробуйте добавить больше контента в текст, посмотрите, работает ли он на вас.