Div на высоту родителя

[maksim_serg]

Доброго дня!
Подскажите как сверстать такой div.div3, что бы он занимал всю свободную высоту :

<div class="parent" style="height:500px;width:300px;">
	<div class="div1">текст</div>
	<div class="div2">текст<br>текст</div>
	<div class="div3"></div>
	<div class="div4">текст<br>текст</div>
</div>

p.s. без скриптов

[Alex11223]

height: 100%?

[maksim_serg]

нет, так зеленый вылезет вниз с нижним блоком

[Naive]

флекс или таблица

[maksim_serg]

на таблицах самое то получилось. спасибо

[maksim_serg]

в IE них... не работает(

[ProBeginner]

Без скриптов никак. В логике CSS нету ключей типа "оставшееся место".
Практикуйте табличный дизайн сайта и не заморачивайтесь, если, конечно это не является тестом для получения работы в супер-мега-дизайн-студии Задрипинска.

[Naive]

Сообщение от maksim_serg

в IE них... не работает(

Еще для ИЕ 5.5 верстали сайты таблицами, у тебя стандартная задача "прибить подвал ко дну".

Сообщение от ProBeginner

Без скриптов никак. В логике CSS нету ключей типа "оставшееся место".

flex-grow - занять все оставшееся пространство. Подойдет как минимум для этой задачи. Для других задач могут найтись и другие хаки.

Сообщение от ProBeginner

Практикуйте табличный дизайн сайта и не заморачивайтесь, если, конечно это не является тестом для получения работы в супер-мега-дизайн-студии Задрипинска.

чо, не взяли и на зло миру верстаешь на таблицах?

[maksim_serg]

Сообщение от Naive

Еще для ИЕ 5.5 верстали сайты таблицами, у тебя стандартная задача "прибить подвал ко дну".

нет так выразился. Таблица тянется, в вот div внутри ячейки td.height=100%, только по ширине. по высоте никак. Думал без него обойдусь, но td не хочет показывать полосы прокрутки

наверно придется скриптом

конечно IE8 старая вещь, но у нас на работе на всех компах стоит он. И стоит запрет на обновление/установку программ

[Nickf]

А вот так не пробовали?

<style>
.div1{
background:blue;
}
.div2{
background:red;
}
.div3{
height:100%;
background:yellow;
}
.div4{
background:green;
position:absolute;
bottom:0;
}
.parent{
overflow:hidden;
position:relative;
}
.div1,.div2,.div3,.div4{
width:100%;
}
</style>