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

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

Есть главный прямоугольник
Внутри него 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;
и все это в родительском блоке с тенью который еще и по центру.