Адаптивная верстка, из-за чего конфликт стилей и height в %?

Question

[nepster-web]

Задача такая:

Есть главный прямоугольник
Внутри него 3 блока (так же прямоугольники)

Особенности:
главный прямоугольник:
- width:100% (max-width:1024px)
- height: 1 + 2 + 3 вложенный блок
- должен обладать тенью
- и быть по центру экрана

1 вложенный блок:
- width:100%
- height:3.5% от всей области экрана (тоесть он динамически должен уменьшатся или увеличиваться)
- min-height:25px;

2 вложенный блок:
- width:100%
- height: высчитывает js

3 вложенный блок:
- width:100%
- height:5% от всей области экрана (тоесть он динамически должен уменьшатся или увеличиваться)
- min-height:45px;

Вот, что у меня вышло:
jsfiddle.net/f2E6b

Где возникли проблемы:
все работает, только если основному блоку задать height:100%, в противном случае в дочерних блоках срабатывает только min-height. + в этом случае при наложении тени, тень будет торчать и после блока до конца экрана.

Пробовал обернуть все еще в 1 блок, то так же игнорируются % height в дочерних блоках. Игрался с позишинами и проиграл.

В общем подскажите пожалуйста как реализовать следующее:

3 дочерних блока:
- 1: width:100%, height:3..5%, min-height:25px;
- 2: width:100%, height: высчитывает js
- 3: width:100%, height:5%, min-height:45px;
и все это в родительском блоке с тенью который еще и по центру.

Comments

[Сергей Протько]

зачем вам там js?

[nepster-web]

Во 2 блоке height должен пропорционально уменьшаться

[Сергей Протько]

@nepster09 это можно сделать через padding.

[Юрий Лобанов]

@nepster09
3 дочерних блока:
- 1: width:100%, height:3..5%, min-height:25px;
- 2: width:100%, height: высчитывает js
- 3: width:100%, height:5%, min-height:45px;
Высота 3% и 5% - это процент от высоты родительского блока или от высоты всей страницы?

[nepster-web]

@Fesor вы имеете ввиду не задавать height, вместо этого задать padding-top:3% и padding-bottom:3% к примеру ?

@iiil тут такая ситуация, что я даже не знаю как правильно ответить. Вообще предпочтение от всей высоты страницы. Но если окутать это дело в родительский блок для тени, то % уже будет браться от родительского блока и результат будет другой.

Я думаю у варианте, где js вычисляет и высоту родительского блока, но еще попробую вариант с padding если я его правильно понял

Answer 1

[Александр Хиренко]

Не совсем понимаю задачу, если Вам нужно закрепить блоки header и footer то используйте абсолютное позиционирование и padding в процентах которые Вам нужны, в родительском блоке. Или объясните конкретней задачу

Comments

[nepster-web]

Смотрите , у меня есть родительский блок он должен обладать тенью. Внутри блока 3 дочерних, height 2 блоков должен быть указан в %, height 3 блока вычисляет скрипт . Проблема в родительском блоке, так как я не могу вычислить точный height. Если укажу 100 % , то косяк с тенью , если не укажу то в дочерних блоках не работает height в %