Можно ли задать height 100% дочернему элементу, ели у родителя указан только min-height ?

Question

[nepster-web]

Собственно заметил такую штуку, которая подпортила мне жизнь.

Например есть родительский элемент и дочерние, к примеру это будет список:

<ul class="test">
    <li>1</li>
    <li>2</li>
</ul>

Теперь попроуем сделать всем li 100%:

* {outline: none !important; box-sizing: border-box; padding: 0px; margin: 0px;} 

    .test {
        list-style-type: none;
        border: solid 1px black;
        width: 200px;
        min-height: 100px;
    }
    
    .test li{
        width: 50%;
        border: solid 1px red;
        float: left;
    }

Проблема в том, что если у родительского элемента нет четкого height, то дочерние элементы игнорируют height 100%. Вопроса сразу 2:

Почему так происходит и можно ли не указывая height родителю решить проблему ?
Как быть с адаптивной версткой, в различных точках править размеры (height родительского блока например) ?

Answer 1

[Владлен Грачев]

Почему так происходит и можно ли не указывая height родителю решить проблему ?

Либо задавать высоту родителю, либо задавать абсолютное позиционирование для потомка. При втором варианте не забудьте сменить позиционирование и для родителя (на position: relative;, например).

Как быть с адаптивной версткой, в различных точках править размеры (height родительского блока например) ?

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

Comments

[nepster-web]

У меня возникла ситуация, когда кужно реализовать одну очень интересную штуку. Большое спасибо, я учту ваш ответ и попробую немного переделать код. О результате отпишусь.

[Евгений Петров]

Добавлю, что имеет значение display для потомка. Скажем, display:table не позволит обойтись исключительно отступами от границ контейнера.

[nepster-web]

@Petroveg это я в курсе. Я уже с ним работал. Спасибо.

я попробовал сделать так.
.test {
list-style-type: none;
border: solid 1px black;
width: 200px;
min-height: 100px;
position: relative;
}

.test li{
width: 50%;
height: 100%;
border: solid 1px red;
float: left;
position: absolute;
}

Дочерний элемент действительно растянулся на 100%, однако теперь есть 2 проблемы:
1) теперь контент не растягивается
2) не работает float

[Евгений Петров]

@nepster09 вам стоит почитать теорию. Не могут одновременно работать и float:left, и position:absolute.

Otherwise, if ‘position’ has the value ‘absolute’, ‘page’ or ‘fixed’, and the value of ‘float’ is ‘left’ or ‘right’, the box is absolutely positioned and the computed value of ‘float’ is ‘none’.

[Владлен Грачев]

@nepster09, абсолютное позиционирование выбивает элемент из потока. И размещать надо руками. Что куда не растягивается?