Вопрос к гуру HTML верстки ДИВами
3 мая 2009 в 13:56

Вопрос к гуру HTML верстки ДИВами

Итак, имеем некий сайт в котором есть колонка к примеру меню, колонка новостей и колонка с текстом. И некая горизонтальная плашка. Одни колонки выше плашки, другие ниже. И по определенным условиям пару колонок приходится делать абсолютными дивами и только один — в теле док-та релативом. Все 3 колонки могут быть любой длинны, т.е. например новости могут содержать дофига текста и колонка сильно уйдет вниз. У сайта есть некий футер который привязан к нижним границам. Когда дофига текста в релативном диве, сайт тянется вниз и получается скролл, при этом нижняя граница общего контейнера определяется верно и футер располагается где надо. Когда вниз тянется абсолюьный слой, то появляется тот же скролл, но нижняя граница общего контейнера определяется как низ экрана, и ниже экрана футер спускаться никак ни хочет.

Собссно вопрос: как при нескольких абсолютных дивах на странице, задать высоту общего контейнера высотой с самый длинный див (с учетом скролла) не используя скрипты или используя совсем чуть-чуть для чего-то навроде document.body.topScroll чтобы футер располагался не внизу экрана а внизу самого длинного дива (за скроллом).

540
Комментарии (26)
  • 3 мая 2009 в 14:14 • #
    Антон Казаков

    Хм... Есть вариант, который в голову приходит первым - сделать абсолютным div-ам margin или padding для контента снизу размером ровно в высоту футера. Не уверен, что прокатит, но пока представляется, что да. Надо смотреть конкретный случай.

    Что же до высоты relative-div'а, зависящей от высоты absolute-div'а, мне кажется, что придётся что-то типа такого написать

    div#content {
    height: expression(document.body.clientHeight - Number(document.getElementById('footer').style.height) 'px');
    }

    Но вообще подоные вещи - это, по-моему, изврат, который показывает, что скорее всего можно было переверстать более удобным образом, чтобы все были relative :)

  • 3 мая 2009 в 15:55 • #
    Alexander Brovkin

    Спасибо. идея интересная, но... футер лежит ПОД всеми текстовыми слоями и по высоте может быть довольно большим :) http://kosilka.ru/dll/inc/ - пример, смотрите в ИЕ, я весьма ракообразно сделал так как задумывалось, но в ФФ футер так хитро не позициониуется и там его пришлось вообще убрать. А так идея интересная, надо попробовать...

  • 3 мая 2009 в 17:12 • #
    Антон Казаков

    Как это в FF не позиционируется снизу по центру бэкграундный рисунок?! Не может быть! :) Возможно, просто в верхнем блоке надо закрыть фигурную скобку для body - тогда всё будет ОК и не только в IE :)

    У меня перед 'px' в скрипте ещё должен быть знак "+", но он куда-то пропал из текста :)

    А страница-пример свёрстана как-то уж очень хитро - внизу лежит какой-то контент, а сверху над ним "висят" div'ы с интерфейсными штуками всякими... Караул какой-то :) Может быть, попробовать им float делать, оставляя их relative? А absolute прописывать только отдельным, которым особенно надо - футер, например, и т.п.

    Кстати, лично я вообще вёрстку на div-ах недолюбливаю. Не заменишь ими таблицы пока что в полной мере... Но местами она всё-таки бывает очень полезна. Да и простенькие сайты div-ами лучше верстать, чем таблицами. Но вот когда нужно вдруг сделать какой-то ячейке принудительно высоту в 100% (то есть, одинаковую высоту div'ов в контейнере, например, но не заданную заранее)... Тут пиши пропало. Нормальной кроссбраузерностью ни одно из изобретённых на данный момент решений этой проблемы не отличается до сих пор, а те, что являются наилучшими, выглядят из-за всевозможных CSS-hack'ов просто страшно :)

  • 3 мая 2009 в 17:21 • #
    Alexander Brovkin

    Ессно таблицы пока ничем не заменить что бы там ни говорили. Сверстано действительно очч хитро потому что там много слоев друг над другом и растяжки довольно хитрые :) Насчет ИЕ и ФФ - если для ИЕ при растяжке вниз ДИВа мы вешаем в боди бэкграунд картинку и ставим ей боттом, она оказывается в самом низу контейнера, что собссно и нужно, то в ФФ она все равно оказывается внизу экрана а див с текстом тянется вниз. Попробуйте сами :) Просто на боди повесте картинку в бэкграунд и сделайте ее Bottom-ом, сами все увидите. Хз почему так...

  • 3 мая 2009 в 18:53 • #
    Антон Казаков

    Хм. Да, действительно. Видимо, у body везде, кроме IE такой же уровень, как и у абсолютных div'ов. Если убрать у body в Вашем примере все упоминания про height и position из стилей, то всё оказывается хорошо, пока отсутствует новостной блок. А он не участвует в формировании высоты body, т.к. он типа над ним, а не внутри него.

    Единственное, что могу посоветовать, - попробуйте div с новостной лентой всунуть не "абсолютным" в ту ячейку главной таблицы, что
     
    А ту часть, которая должна наползать на шапку, смёрджите тогда с шапкой в фотошопе, а к ней нижнюю часть этого серого градиента потом просто "пристыкуете".

    Но вообще подобная вёрстка - просто извращение :) Лучше высоту "абсолютных" div-ов как-то фиксировать, чтоб они не заползали за границы body никак, если уж пользуете такое.

  • 3 мая 2009 в 22:13 • #
    Alexander Brovkin

    >>>А ту часть, которая должна наползать на шапку, смёрджите тогда с шапкой в фотошопе, а к ней нижнюю часть этого серого градиента потом просто "пристыкуете".

    Да, только проблема - новостной блок тянется точно также :) И отловить %% ширины в шапке и %% ширины нижнего столбца - нереально т.к. ширина остальных блоков разная и на каком либо разрешении все разьедется нафик. Поэтому выход - только цельные блоки... И извращенная верстка :) И еще - в шапке ездит и картинка и отражение и бекграунд нестатический и голубая плашка тянется в общем там пипец :) и смерджить просто так не выйдет... Если б можно было задавать высоту общего контейнера как высоту максимального дива - это решило б все проблемы извращенной верстки :) Делае кучу абсолютных дивов и все, верстка будет напоминать картинку в фотошопе с кучей слоев :)

  • 3 мая 2009 в 14:43 • #
    Andrey Boyko

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

  • 3 мая 2009 в 15:22 • #
    Alexander Brovkin

    Вот например: http://kosilka.ru/dll/inc/ как сделать новостной блок релативом я не представляю :) ибо там одно над другим лежит. Хотя по идее можно сделать 3 колонки релативомно хз что из этого выйдет.

  • 3 мая 2009 в 15:45 • #
    Andrey Boyko

    можно поиграться с плавающими блоками и отрицательным margin - ном, только тогда нельзя будет пользоваться "overflow:hidden;" для главного блока в котором находиться контент

  • 3 мая 2009 в 15:53 • #
    Alexander Brovkin

    Да хочется не поиграться а некое решение которое присвоит высоту максимального дива высоте общего контейнера.

    Вот такая штука как Антон написал выше: div#content {
    height: expression(document.body.clientHeight - Number(document.getElementById('footer').style.height) 'px');
    }

    теоретически должна сработать, но надо проверить...

  • 3 мая 2009 в 16:09 • #
    Andrey Boyko

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

    попробуйте сделать новостной блок плавающим и назначить ему отрицательный верхний margin и он "залезет" на верхний блок как на http://kosilka.ru/dll/inc/

  • 3 мая 2009 в 15:07 • #
    Андрей Михнюк

    посмотри на
    http://seolit.narod.ru
    может будет полезно...
    Михнюк Андрей

  • 3 мая 2009 в 20:18 • #
    Андрей Клеменченок

    Вкратце:
    Оказаться от абсолютного позиционирования колонок в пользу float (правая float:right, левая float:left, центральная при помощи margin отбивается справа и слева на ширину этих колонок). Все три колонки помещаются в общий охватывающий див (задать ему минимальную высоту = высоте экрана) который будет тянутся вместе с колонками (тут два варианта либо задать этому слою width:100%; overflow:hidden либо вложить перед его закрытием дополнительный пустой блок c clear:both)
    Футер должен располагаться сразу за этим охватывающим слоем и иметь отрицательный margin-top=высоте футера.
    Чтобы футер не перекрывал контент у охватывающего блока задается padding-bottom=высоте футера
    Если необходима более подробная инструкция или примеры welcome в личку

  • 3 мая 2009 в 22:15 • #
    Alexander Brovkin

    Футер лежит подложкой под текстом и он выше текста. Новостной блок налезает сверху на синюю плашку и при этом тянется. Вот как это сделать я хз.. Вот собссно пример: http://kosilka.ru/dll/inc/ в ИЕ видна вся степень извращения :)

  • 3 мая 2009 в 22:21 • #
    Андрей Клеменченок

    >>>Футер лежит подложкой под текстом и он выше текста
    ???? Даже представить себе не могу футера, который выше текста :)
    >>>Новостной блок налезает сверху на синюю плашку
    Отрицательный margin или top вам в помощь
    А вообще лучше бы посмотреть на предмет разговора, а то как-то в угадайку играем

  • 3 мая 2009 в 22:32 • #
    Alexander Brovkin

    >>>А вообще лучше бы посмотреть на предмет разговора, а то как-то в угадайку играем

    Дык я выше ссылку дал :)
    http://kosilka.ru/dll/inc/

  • 3 мая 2009 в 22:41 • #
    Андрей Клеменченок

    Типичный трёхколонник. Не понимаю в чём у вас сложности. Погуглите на тему "Три колонки CSS"
    Фон футера сделайте фоном охватывающего слоя
    Вот пример двухколонника, при доработке напильником будет три колонки http://pixelstore.ru/demo/twocol/

  • 3 мая 2009 в 23:12 • #
    Alexander Brovkin

    Это все понятно :) там хитрость со средней колонкой, если приглядеться она наезжает сверху на синюю плашку и все что в ней... Вот в чем самый гимор. Как ее в релативе поднять выше синей плашки и всего что там? Отрицательным маргином?

  • 3 мая 2009 в 23:38 • #
    Андрей Клеменченок

    Можно отрицательным margin, для релативного блока достаточно отрицательного top. В конце концов можно поднимать не саму плашку а её содержимое.
    Да и плашку можно разрезать на части, так чтобы её нижняя часть была фоном для трёх колонок, тогда даже отрицательные значения не понадобятся. Вариантов масса.

  • 4 мая 2009 в 01:30 • #
    Alexander Brovkin

    спасибо, в след. раз попробую отрицательный top. А решения по моему вопросу (высота общего контейнера = высоте максимального абсолютного дива) существует или нет?

  • 4 мая 2009 в 08:28 • #
    Андрей Клеменченок

    Решения на чистом HTML/CSS нет. Абсолютный контейнер на то он и абсолютный, что является вырванным из нормального потока и не влияет на остальные блоки.
    Как вариант, можно при помощи JS высчитывать высоту колонок и присваивать эту высоту охватывающему контейнеру, но это всё равно что правой рукой левое ухо чесать, ваша задача решается гораздо проще

  • 4 мая 2009 в 11:44 • #
    Alexander Brovkin

    Ок, спасибо

  • 3 мая 2009 в 22:45 • #
    Андрей Клеменченок

    Извините, смотрел в FF не сразу понял, что вы футером называете :)
    http://pixelstore.ru/demo/twocol/ пример двух колонок. Доработать напильником и будет 3

  • 4 мая 2009 в 13:40 • #
    Дмитрий Тихонов

    Ничего-то вы не знаете =))

    {body}
    {div}news{/div}{div}content{/div}
    {div style="clear:both"} {/div}
    {div}footer{/div}
    {/body}

  • 5 мая 2009 в 09:20 • #
    Андрей Клеменченок

    LOL.
    Учитесь читать ТЗ, юноша. Нет флоатов, значит clear:both
    ничем не поможет

  • 8 мая 2009 в 17:37 • #
    Илья Романов

    ...Заинтересовал меня этот примерчик ).
    В общем, если еще надо то, каркас здесь:
    http://narod.org.ru/lifesaver/fish/index.htm
    (3.5 часа работы)
    Потестил в ИЕ 6 , 7. 8 (IETester), Mozilla 3.0.10, Opera 9.63, Chrome и Safari (хз какие). Под Х-сами и Маками не тестил, ибо не имею ОСей таких на машине этой.

    Единственный баг (конечно же ИЕ6) - при уменьшении размеров окна приблизительно до 800 пикс. правый блок пропадает, но появляется если нажать F5.

    З.Ы. Когда же он наконец то сойдет со сцены (ИЕ6 )?
    З.З.Ы. бггг ...прАфИссиАналы АднакА сАбралис тут ))))*