Здравствуйте.
Есть такой макет страницы:
jsfiddle.net/A89PG/2
Мне нужно чтобы получилось что-то подобное:
jsfiddle.net/sRRf7/19
Обратите внимание, что подъем (открытие) осуществляется только при нажатии на фиолетовую область, а закрытие как при нажатии на фиолетовую, так и на красную области (зеленая область пассивна). Также стоит отметить, что красно-фиолетовый блок сам НЕ опускается (не закрывается), а ожидает следующего нажатия.
Мне нужно, чтобы на месте красного цвета располагались Header и Content.
А на месте зеленого цвета располагался Footer.
И еще очень важные просьбы:
1) Зеленый Footer должен быть прижат к низу окна браузера (а если контент выходит за пределы окна браузера по высоте и появляется полоса прокрутки, то footer должен находиться под контентом) и то же самое касается фиолетовой кнопки (то есть в закрытом состоянии как и footer должна быть прижата к низу).
2) Зеленая (Footer), красная (content и header) и фиолетовая области должны занимать 100% ширины экрана.
3) Внутри зеленого footer'а будут размещаться ссылки (нужно чтобы они работали при нажатии)
4) При помощи JS или JQ должна быть максимум реализована подъемная конструкция, все остальное только на CSS (а вообще хотел бы чтобы все было на CSS если возможно).
Куски кода можно менять как угодно, можно хоть свои имена задавать, и удалять можно что угодно. Лишь бы работало)
Простой
