Доброго времени суток!
Сразу скажу, что я пользовался поиском и не смог найти ответа именно на мою вариацию вопроса.
И еще добавлю, что у меня две части одного вопроса, поэтому сразу прошу прощения за много букв и, возможно, сложный для восприятия текст.
Предисловие.
У меня есть шапка с фиксированной высотой, допустим 150px (на самом деле 169, и вообще изменяется в зависимости от media queries, но ведь это не важно). Далее DIV, который я и хочу растянуть на 100% оставшейся высоты между шапкой и следующими слоями. И один слой с фиксированной высотой 100px и подвал с фиксированной (простите за тавтологию) высотой 60px. То есть формула простая:
neccesary_height = window.outerHeight - 310
По сути, вот есть пример другого автора, который работает идеально, если на всю высоту контейнера есть контент.
Тогда если изменять размер окна, то появляется скроллбар и все работает как следует.
Вопрос 1.
А если контента меньше всей оставшейся высоты окна или вообще нет, то при изменении размера окна (или изначально маленькой высоте) все блоки ниже просто наезжают на него и потом он исчезает совсем.
http://jsfiddle.net/qsad/x8s0rytk/
Есть ли у кого-нибудь идеи как это решить? CSS, JavaScript - все подойдет.
Вопрос 2.
Если внутри этого DIV расположить два блока с:
width:50%; float:left; height:100%;
то они не будут наследовать высоту родителя и будут занимать лишь ту высоту, которой равен их контент. Специально уменьшил высоту всех блоков для иллюстрации проблемы.
А мне нужно, чтобы они наследовали..
http://jsfiddle.net/qsad/zdm6e0Lk/
Заранее благодарю за ответы.