Почему при указании минимальной высоты, блоки внутри блока с высотой в процентах теряют вообще свою высоту?

Question

[Аминнулла Гаджиев]

Столкнулся с проблемой, и видимо это уже проблема на уровне браузеров или же самого CSS. Чтобы указать высоту объекта в процентах надо указать высоту его родителю, я указываю высоту родителя, и все работает, но как только я устанавливаю вместо постоянной величины минимальную, то высота дочернего блока спадает до своего обычного, как можно избежать этой проблемы? А также как можно сделать так, чтобы блок занимал 100% высоты экрана, и сколько бы ты не отдалял экран, у тебя он все равно бы был с 1 конца экрана до другого? Надеюсь сформулировал свой вопрос хотя бы немного понятно.

Answer 1

[ArtJH]

Проблема с height: 100%, проявляющаяся, когда у родительского элемента не установлен height, но указан min-height
Вам необходимо установить height: 1px для родителя, чтобы дочерний элемент смог занять всю высоту указанную в min-height.

.parent {
    min-height: 300px;
    height: 1px; /* Требуется, чтобы дочерний блок взял высоту 100% */
}

.child {
    height: 100%;
}

2) Чтобы блок занимал всю высоту экрана задайте ему

.block{
height: 100vh;
}

Чтобы блок занимал весь экран, по ширине и высоту, то задайте ему

.block{
height: 100vh;
width: 100vw;
}

Comments

[MagnusDidNotBetray]

Но какой смысл в этом коде?

.parent {
    min-height: 300px;
    height: 1px;
}

Это то же самое, что и

.parent {
    height: 300px;
}

,
высота блока станет фиксированной, и не будет увеличиваться при переполнении.

Answer 2

[Dryzhkov]

а можно пример кода?

Answer 3

[kryamk]

https://learn.javascript.ru/height-percent
https://webref.ru/css/unit/vh