Почему min-height от min-height не работает?

[Launder]

А почему min-height от min-height не работает?

https://jsfiddle.net/Launder/w092L3qL/

 

если в #level1 вместо height поставить min-height, то браузер не сможет подсчитать размер для #level2

И как же быть, если нам нужно сделать именно растягивающийся блок, минимальный размер которого задан в %?

[nick1403]

html, body

    {

   height: 100%;

    }

#level1

    {

   height: указываемая величина; 

      min-height: какая - то минимальная феличина;

      background: #abc;      

    }

 

#level2

    {

      min-height: 50%;

      background: #cab;

    }

[wwt]

Потому что min-height это не размер, а граница размера, пропишите оба свойства и все заработает.

[Launder]

@wwt, вот смотрите:

 

https://jsfiddle.net/Launder/w092L3qL/1/

 

для level два можно закомментировать (отменить) любое свойство что height, что min-height - рояли не играет, они будут работать одинаково, а для level1 когда height указываешь, появляется высота и для level2, когда высоту для level1 комментируешь, то высота для level2 исчезает.

Зато для level1 когда height указан, его высота получается строгой, вне зависимости от наличия min-height и от того, что из них находится в коде ниже, а когда остаётся только min-height, то высота level1 растягивается по содержимому.

Как сделать так, чтоб высота для level1 имела минимальный размер и растягивалась по содержимому, при этом level2 также растягивался от содержимого и имел минимальную высоту равную

1) 50% от заданной высоты level1

2) 50% от реальной высоты level1, то есть чтоб когда растягивался level1, пропорционально растягивалась минимальная высота и level2?