relative приклеить к низу

[hated8]

Здравствуйте, я новичек на сайте но не в вёрстке но вот столкнулся с проблемой, которую не смог решить самостоятельно, что и побудило к регистрации на вашем многоуважаемом форуме =)

В общем прошу помощи...

 

 

Есть блок relative(голубой), в котором должны быть 3 дива. Верхний static, нижний приклеенный к bottom, а посередине блок с контентом(красный), который тоже необходимо приклеить к низу. В этом то и проблема! Он должен быть динамической высоты(в зависимости от объёма входящего в него контента) и влиять на высоту родительского блока.

При absolute+bottom:0 - он клеится к низу, но перестаёт растягиваться и контент вылазит за границы, а при pos->relative фиг знает как его к низу приклеить   

 

В общем очень жду вашей помощи...

 

[Veseloff]

Код на jsfiddle выложите

[hated8]

Код на jsfiddle выложите

 

Ну вот например

http://jsfiddle.net/rLjsxL0L/5/

 

Выглядеть должно так, но при добалвении контента в блок contentdiv, блок должен упираться в topdiv и растягивать bgdiv, а не залазить поверх...

[Veseloff]

http://jsfiddle.net/9xz22ytw/

[hated8]

http://jsfiddle.net/9xz22ytw/

Что то вы вообще не то сделали, или вообще не так меня поняли....

 

1) добавьте контент в contentdiv, и увидите как он изо всех щелей выпирает  как только его стало больше чем bgdiv->min-height (http://jsfiddle.net/9xz22ytw/1/)

2) Он должен быть приклеен к низу и растягиваться при наполнении контентом, а не сразу быть развернутым на всю высоту.

 

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

http://jsfiddle.net/rLjsxL0L/6/- но он не растягивает bgdiv

 

рабочий вариант http://jsfiddle.net/rLjsxL0L/7/- но в нем contentdiv приклеен к верху, а надо к низу

 

 

если кратко, то нужно сделать одно из двух на выбор:

а) заставить растягиваться родительский relative если дочерний absolute выходит за его границы

б) как то приклеить relative к низу

Edited September 17, 2015 by hated8

[hated8]

Решил задачу с помощью таблы

http://jsfiddle.net/rLjsxL0L/10/

 

Но если подскажете css решение буду признателен =)