Проценты % при задании высоты height блока — не работают. Проценты работают только при задании ширины. Точнее свойство height, указанное в %, работает если для внешнего блока указана высота.
Существует правило:
Если высота внешнего блока вычисляется по содержимому, то высота в % не работает, и заменяется на
height: auto. Кроме случая, когда у элемента стоитposition: absolute.
Если необходимо задать высоту блока — следует указывать значение в px или других фиксированных единицах, либо задав position: absolute. На практике это часто выручает. Для изображений также желательно задавать только ширину или только высоту — в этом случае браузер автоматически пропорционально изменит вторую размерность.
Чтобы блок был 100% высоты области просмотра
height: 100%, всем его родительским элементам (напримерhtmlиbody) тоже должна быть задана 100% высота.