Сайдбар 100%-ой высоты, прижатый футер + всплывающее окно.

[Yamaradg]

Всем привет. Очень нужна помощь. Столкнулся с ситуацией, над которой целую ночь проломал голову. Есть такая страница: http://webmaster.ayr...dow/index.html# Требуется, что бы левый сайдбар на ней тянулся относительно общей высоты(то есть был бы равен 100%) + футер должен быть прижат к низу страницы. Это конечно реализовать не сложно. Проблема возникает тогда, когда всплывающее окно(то есть планируется, что оно будет всплывать конечно. ) начинает иметь высоту большую чем его обвёрточный блок(.wrapper_progressive_window) В общем всё это дело(окно с белым-полупрозрачным фоном) начинает налазить на футер и выходить за рамки всех родительских блоков(в том числе и body и html.)! Это всё логично конечно - так и должно быть. Но! как обойти эту проблему? Перепробовал всё, что только знаю! (Менять абсолютное позиционирование естественно пробовал. + задавал всем присутствующим на странице блокам практически всё, что только возможно.(кроме таблиц.) Пробовал даже(в сочетаниях с определёнными комбинациями) тегам body и html задавать {float:left;} и {overfow:hidden} ) Проблема очень срочная и не терпит отлагательств. Буду благодарен за любые советы, намёки и подсказки.

P.S. Планируеться, что это окно будет ресайзится. (То есть принимать абсолютно любые размеры по длинне и ширине, без перезагрузки страницы. )

Edited March 1, 2013 by Yamaradg

[skatadov]

Вряд-ли... Абсолютное на то и абсолютное, чтобы так себя вести: "другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет".

А что на странице еще будет? Можно макет глянуть? Какого рода контент? Он изменяем? Можно как-то попробовать извернуться в принципе по иному, без absolute для окна.

[Yamaradg]

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

(Но вопрос уже решён. Просто тз изменилось..)

На сколько я понимаю решить такую задачу можно только с помощью скрипта..

P.S. На странице больше ничего не предполагалось.

(Кроме внутреннего содержимого окна + наполнения контентом левого сайдбара.)

Edited March 1, 2013 by Yamaradg

[skatadov]

Раз ничего не предполагалось, можно спокойно было бы задать окну position: relative; - в таком случае, оно просто растягивало бы окружающие блоки. Нельзя так было бы сделать только из-за контента, который мог быть на странице за пределами окна. В правой колонке имею в виду.

[Yamaradg]

Так всё не так просто.

Либо сайдбар при отсутствии контента не тянулся бы на все 100% по высоте.

Либо футер не прижимается - в том случае когда окно слишком большое..

[skatadov]

Если я правильно все понял, проблема с сайдбаром и футером при желании решаема.

Что вы имеете в виду под сайдбаром? Узкая серая вертикальная полоса слева?

[Yamaradg]

Прошу прощения, что сразу не ответил.

(Все эти дни у меня почему то этот форум отказывался открываться(по стандартному адресу из закладок) с 403-ей ошибкой.)

Каким образом эту проблему решить можно?

(могу файлы скинуть при необходимости..)

Просто самому очень интересно.

[skatadov]

Схематично набросал свой вариант решения

http://verstalshik.info/test/0001/1.html

Вроде как все условия соблюдены.

Возможность забить любой объем текста в всплывающее окно, сайдбар на всю высоту, прижатый футер.

Но этот способ, как уже и писал, будет нормально работать только если в правую колонку не пойдет больше никакого контента.

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

Правда, придется для левой колони обойтись без box-shadow и использовать довольно большие картинки местами для достижения нужного эффекта.

[Yamaradg]

Возможность забить любой объем текста в всплывающее окно, сайдбар на всю высоту, прижатый футер.

Но этот способ, как уже и писал, будет нормально работать только если в правую колонку не пойдет больше никакого контента.

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

Правда, придется для левой колони обойтись без box-shadow и использовать довольно большие картинки местами для достижения нужного эффекта.

Большое спасибо за пример. Разберу его на досуге..

P.S. А сайдбар наполнять контентом можно как угодно?

+ Не совсем понял почему тени работать в данном случае не будут?

Также не понял почему в правую колонку(тоесть окно как я понимаю) нельзя больше ничего добавлять?

(Но это уже наверное сам должен буду в этом разобраться..

Ещё раз спасибо!

[skatadov]

Сайдбар можно наполнять контентом как угодно.

Тени... Насколько я помню вашу верстку, там сайдбар сделан одним блоком, растянутым на 100% высоты.

В моем варианте сделана, так скажем, ложная колонка путем замощения на 100% высоты картинкой, пущенной по вертикали.

Сам сайдбар имеет высоту контента, который в него будет забит.

Отсюда не получится таким образом делать тени там посредством css и придется добавлять дополнительно дивы с картинками для достижения нужного эффекта.

Ну или получится, но несколько более замороченно.

В правую колонку (.btr) добавить контент, конечно, можно - попробуйте и посмотрите, что из этого выйдет.

Потому и сказал о абсолютном в ней позиционировании контента и, соответственно, вызванных этим ограничениях.

[Yamaradg]

Сайдбар можно наполнять контентом как угодно.

Тени... Насколько я помню вашу верстку, там сайдбар сделан одним блоком, растянутым на 100% высоты.

В моем варианте сделана, так скажем, ложная колонка путем замощения на 100% высоты картинкой, пущенной по вертикали.

Сам сайдбар имеет высоту контента, который в него будет забит.

Отсюда не получится таким образом делать тени там посредством css и придется добавлять дополнительно дивы с картинками для достижения нужного эффекта.

Ну или получится, но несколько более замороченно.

В правую колонку (.btr) добавить контент, конечно, можно - попробуйте и посмотрите, что из этого выйдет.

Потому и сказал о абсолютном в ней позиционировании контента и, соответственно, вызванных этим ограничениях.

Понял. Большое спасибо.

[Yamaradg]

Сайдбар можно наполнять контентом как угодно.

Тени... Насколько я помню вашу верстку, там сайдбар сделан одним блоком, растянутым на 100% высоты.

В моем варианте сделана, так скажем, ложная колонка путем замощения на 100% высоты картинкой, пущенной по вертикали.

Сам сайдбар имеет высоту контента, который в него будет забит.

Отсюда не получится таким образом делать тени там посредством css и придется добавлять дополнительно дивы с картинками для достижения нужного эффекта.

Ну или получится, но несколько более замороченно.

Cейчас разбирал ваш пример - но там получается что сам сайдбар(.btl насколько я понимаю) вообще отсутствует.

То есть у него отрицательный правый маргин стоит. Если его убрать + контентом наполнять - то ,как вы сказали, он будет иметь высоту заложенного в него контента.

Но! 100%-ю высоту(минимальную) ему задать уже не получится.(Я правильно понял?)

То есть нужно будет как то это дело совмещать с бекграундом для #btouter ? (Я правильно суть уловил?)

[skatadov]

То есть у него отрицательный правый маргин стоит.

Отрицательный маргин там написал по привычке, он не особо нужен - это правка косяка в ИЕ6.

100%-ю высоту(минимальную) ему задать уже не получится.(Я правильно понял?)

Да. И не надо ее задавать, См. ниже.

То есть нужно будет как то это дело совмещать с бекграундом для #btouter

Верно

Грубо говоря, делим фон на три части. Первая часть, которая, собственно, тянется по высоте - это картинка шириной с левый сайдбар (.btl), вторая картинка, засунутая фоном в див формирует нижнюю часть сайдбара - этот див крепим аюсолютно к футеру, третья часть - оформление верхушки сайдбара - пихается как background в .btl, которому задается min-height, равное по высоте этой картинке, чтоб стыков видно не было - вот и как надо оформленная левая колонка, тянущаяся на 100% высоты. А в нее (.btl) уже, в свою очередь, можно пихать нужный контент.

Edited March 6, 2013 by skatadov