позволяя абсолютно позиционированной области расти

Question

См. Эту страницу для справки: тестовая страница

Я разрабатываю сайт с боковой панелью, содержащей вертикальную навигационную панель в стиле аккордеона.Боковая панель, которая содержит этот аккордеон, абсолютно позиционирована относительно контейнера, в котором она находится.Я сделал это так, чтобы боковая панель оставалась липкой сверху, снизу и сбоку.

Когда вы нажимаете кнопку продуктов, аккордеон расширяется далеко за пределы контейнера, перетекая в нижний колонтитул.Если бы я поместил боковую панель влево, она бы выросла, чтобы вместить всю боковую панель, но по умолчанию она не была бы липкой к нижней части контейнера.

Мне нужно решение, которое позволяет боковой панели бытьабсолютно позиционированы и позволяют рост, если аккордеон расширяется.Есть идеи?Решение JQuery, возможно?

Answer 1

Хотя вопрос заключался в том, как вы можете увеличить абсолютно позиционированную область, ответ на этот вопрос вы просто не можете без использования javascript.

После некоторого исследования кажется, что многие люди застряли в одной и той же позиции: «Как вы получаете правую колонку (боковую панель), которая расширяет весь путь вниз по странице?»

В ответе используются искусственные столбцы!

http://www.alistapart.com/articles/fauxcolumns/

Answer 2

Я не понимаю, почему вы не можете использовать float.

Что вы имеете в виду с наклейкой вниз?

EDIT

Поскольку вы используете абсолютное позиционированиеТеперь способ расширить контейнер, потому что меню больше не в потоке.(Хорошо, вы можете использовать JavaScript), но я действительно не вижу проблемы.

Answer 3

Я обнаружил, что установка overflow: hidden; на содержащем div обычно творит чудеса. Поскольку вы сказали скрывать содержимое, браузер старается изо всех сил , а не скрыть его (если вы не установили высоту или максимальную высоту). В целом, это хорошо работает, когда в контейнере есть значения с плавающей точкой и т. Д. Нет необходимости добавлять div к clear: both; и т. Д.

Дай попробовать ...

Редактировать: Я играл с этим и не могу заставить его работать на вашем сайте. Можете ли вы просто перемещаться влево по меню и главной области, а затем установить контейнер на overflow: hidden;? Это то, что я использовал в прошлом.

Answer 4

Решение jQuery должно быть возможным, если что-то вроде этого подключено к прослушивателям кликов для ссылок навигации:

$('#leftbar').height( $('#leftbar')[0].scrollHeight );
$('#container').height( $('#container')[0].scrollHeight );

Это должно в основном изменить размер бара и контейнера, чтобы содержать их содержимое. Возможно, вы захотите отрегулировать на несколько пикселей или еще что-то, но это идея.

Редактировать: Это может быть осложнено тем фактом, что аккордеон не раскрывает сразу все подменю, возможно, придется поместить это где-то в цикл изменения размера или просто сделать это в конце анимации, если это кратковременное расхождение с тобой все в порядке.

Answer 5

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