Веб-приложение, одна маленькая особенность верстки

    В качестве примера, иллюстрирующего поставленную задачу, могу привести вот этот топик: Миниатюрное приложение-калькулятор. Особенность, которую должен учесть верстальщик, заключается в следующем: окно с приложением обычно не растянуто на весь экран (зачем, например, разворачивать на весь экран калькулятор или софтфон?), но при этом размер окна может меняться пользователем, причём меняться очень даже произвольно, вплоть до полного экрана.

    Итак, возникла производственная задача: необходимо расположить на страничке шапку фиксированной высоты, а всё остальное место заполнить контейнером с возможностью появления полосы прокрутки в случае большого количества контента в нём. Т.е. должна прокручиваться не страничка, а див (а-ля аська, в шапке кнопочки, в контейнере контакт-лист). Казалось бы, задача тривиальная, решается с кандачка (у дива высота 100% и каким-то образом вычесть из неё фиксированную высоту шапки). Ан нет, час битья лбом о клавиатуру ничего не принёс.

    Уже дома в уставшую голову пришла бредовая идея — попробовать растянуть див по вертикали с помощью top:0, bottom:0. И, знаете, сработало! Правда, не везде — ИЕ6 заупрямился, никак не хотел совмещать нижний край дива с нижним краем страницы. Пришлось его «хакнуть».

    Вот, что у меня получилось (в примере даже два контейнера с различным по величине содержимым):

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
    <head>
    <title>Веб-приложение</title>

    <style type="text/css">

    * {margin: 0; padding: 0;}
    /* "Ластик", подчищает значения по умолчанию (для разных браузеров и разных элементов на странице они разные). Просто я так привык :) */

    html, body {height: 100%;}
    /* Этот стиль необходим для того, чтобы expression (см. хак для ИЕ6 ниже по коду) тянул колонки по всей высоте clientHeight, которая по умолчанию равна величине контента на странице. */

    .block {position: absolute; top: 100px; bottom: 0; overflow: auto;}
    /* Общий стиль для всех блоков, которые будут тянуться до нижней границы окна браузера. Основная идея в том, чтобы использовать одновременно параметры top и bottom при абсолютном позиционировании (Внимание! Высоту для ДИВов задавать не надо, они и так растянутся по значениям top и bottom). Здесь top:100px - фиксированная высота шапки. Проблема возникла только в ИЕ6, он не воспринимает одновременно два этих параметра. Пришлось применить хак для него (см. ниже). Прокрутка включается параметром overflow. */

    * html .block {height: expression(document.body.clientHeight-100 + "px");}
    /* CSS-хак, действующий на ИЕ6 и ниже. Обратите внимание, здесь из высоты clientHeight вычитается высота шапки (100 пикс.) */

    </style>

    </head>
    <body>
    <div style="height: 100px; background: yellow">Фиксированная шапка, высота 100 пикс.</div>
    <div class="block" style="width: 200px; background: green;">
    Содержимое первого блока. Чтобы была видна суть, нужно вставить побольше контента...
    </div>
    <div class="block" style="left: 200px; width: 300px; background: red;">
    Содержимое второго блока. Чтобы была видна суть, нужно вставить побольше контента...
    </div>
    </body>
    </html>


    Кстати, чтобы в этот код добавить фиксированный по высоте «подвал», нужно для него назначить такой стиль: {position: absolute; bottom: 0; width: 100%; height: 100px;} и учесть его в стиле .block (изменить значение bottom на величину высоты добавляемого блока, плюс в expression вычесть эту же величину).
    • «Живой» пример (Уже не работает в силу причины отсутствия файлов на хостинге)
    • Отображаемость в различных браузерах можно посмотреть на BrowserShots.org

    Комментарии 55

      –3
      ну и что тут сложного или уникального чтобы аж писать статью?
        +4
        Я достаточно давно занимаюсь версткой, и я бился над этой проблемой несколько часов, поэтому я посчитал, что плод моих размышлений и исканий может оказаться полезным кому-нибудь ещё, кроме меня.
        Если вы считаете, что способ очень распространенный, помогите мне, пожалуйста, с поисковой ссылочкой на гугл, где можно было бы посмотреть примеры похожего метода.
          +3
          все гениальное — просто, не за что осуждать автора
          полезный пост, который при случае можно будет развить далеко за пределы статьи
            –2
            сколько у меня минусов по верхнему посту — столько непрофесоинальных разработчиков прочитала эту статью и нашла в ней что-то уникальное. проблема рабочая, и решение не сложное. Жду от автора следущую сатью про то как он заключил заголовок в теэги h1.
              0
              Не буду извиняться за минусующих, это их право и личное решение…

              Для элементарных задач всегда есть куча примеров и советов. Тем не менее, удовлетворяющего меня решения в инете я не нашёл.
              Если Вам известны места в сети, где описан этот способ решения проблемы, дайте знать, пожалуйста.
            +4
            Добрый день
            Вот тут есть пример реализации подобного (и более сложных макетов) без ресурсоемкого expressions — очень рекомендую:
            www.dynamicdrive.com/style/layouts/category/C11/
            Уже полгода ем и нахваливаю :)
              +1
              Есть еще задача, которую решить без таблиц мне пока не удалось, и я не уверен, что это вообще возможно. Сделать макет, состоящий из шапки переменной высоты (в зависимости от ее контента) и области контента, чтобы она была скроллируемой. И чтобы все это дело тянулось на 100% высоты.
              Если кто-то знает, как сие шаманство можно сделать — расскажите, пожалуйста, думаю, не одному мне полезно будет.
                +1
                Спасибо, раньше не встречал такого красивого решения.
                +1
                Огромное спасибо за полезную ссылочку! И где вы были вчера? :)
                  +1
                  Пользуйтесь на здоровье :)
                  +1
                  имхо, оба варианта имеют право на жизнь ;) кстати, спасибо за ссылочку, действительно раньше не встречал её…
                    +1
                    Стараюсь код делать как можно компактнее, а в примере под ссылочкой даже дополнительный обертывающий див… Но я нисколько не умаляю полезность этого ресурса, там же практически на все случаи жизни есть примеры!
                    0
                    клёво конечно, да только там IE6 работает в quirks режиме, что не всегда приемлимо
                      +1
                      Ой, да, действительно :) Вот и ещё один гол в мою пользу :)
                        0
                        B без него работает — проверено.
                        В самом деле, у обоих решений свои плюсы. На сложном макете, где несколько раз используется вложенность всей этой конструкции, проще добавить лишний div обертки, чем мириться со слабой производительностью expressions
                      +1
                      www.dynamicdrive.com/style/layouts/item/css-top-frame-layout/

                      — в Опере 9.52 при скроллинге траблы.
                      +1
                      При сужении окна (ФФ 3) внизу появляется полоса прокрутки, но она съедается правым краем окна. Кнопка «вправо» полосы прокрутки становится не видна, вместе с частью полосы прокрутки.
                      Вы такого эффекта хотели добиться? По-моему полоса прокрутки должна быть всегда доступна, если есть что прокручивать.
                      Прошу прощения за повторения в комментарии.
                        +1
                        Пардон, кажется я не понял, видимо нужна была прокрутка «вверх-вниз»…
                          +2
                          Я попробовал, но так и не смог воспроизвести Ваши действия с ФФ. При сужении окна ФФ до величины, меньшей, чем сумма ширин обоих блоков, внизу страницы действительно появляется горизонтальная полоса прокрутки (ширины блоков фиксированные), но правая кнопка прокрутки находится на своем месте и нормально работает. У Вас ФФ какой версии?
                            +1
                            Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1
                            Скриншота приложить не смогу, ни одного графического редактора в системе, даже Paint'а. Админы увлекаются самосборкой виндовс, а им потом пользоваться нельзя =(
                              +2
                              MS Office есть? В Word вставьте после PrintScreen, и выложите плиз на какой-нить файлообменник (например, zalil.ru)
                                +1
                                  +2
                                  Мдя… Действительно, очень странно…
                                  Народ! Кто-нибудь знает, что может быть причиной токого поведения горизонтальной прокрутки в ФФ?
                                    +1
                                    Чуть ниже мое мнение с извинениями.
                              +1
                              Кажется, это проблема ФФ с его GUI, сделанном на Chrome и к верстке никакого отношения не имеет. Другие win-окна с нижней прокруткой работают нормально, ФФ делает так на любой странице. Хотя возможно что это так только на этой отдельно взятой собранной виндовс. Извините, что потревожил.
                                +1
                                Да не стОит, какие уж тут тревоги :)
                                  0
                                  А у меня та же проблема… ФФ и винда обычные.
                                  При уменьшении окна горизонтальный скрол обрезает справа и окошко подергивается слегка.
                                  3.0.1
                            0
                            Интересное решение!
                              +1
                              Позитивный какой пост получился неожиданно :)
                                +2
                                Немного плюсиков не хватает для выхода на главную страницу :)
                                  0
                                  На главной обсуждение пошло бы быстрее
                                +1
                                Сегодня долго провозился с почти такой же проблемой. В итоге небольшая недоработка для Firefox-а осталась.
                                Завтра исправлю, используя ваше решение =) Спасибо.
                                • НЛО прилетело и опубликовало эту надпись здесь
                                    +1
                                    А об отрицательных полях не думали?
                                      0
                                      Думал, конечно, не выходило… Буду очень рад, если у Вас окажется рабочий примерчик с отрицательными полями, и Вы поделитесь с нами кодом :)
                                      0
                                      именно со скролингом нету (может быть и из-за него такое решение и у Вас).
                                      А фиксации подвала или шапки а все остальное на 100%, есть много.
                                      Причем через отрицательные поля, поэтому и спросил думали ли об этом.
                                        0
                                        Да, основная задача, которую я рассматривал, это именно растягивание дива по высоте страницы плюс запрет скроллинга самой страницы… Задача наверняка редковстречающаяся, потому и описал её здесь.
                                        0
                                        No comments…
                                        Следующая статья наверно будет про замену подчёркивания ссылок пунктиром…
                                          0
                                          О! А расскажите, плиз, как это можно сделать? Чтоб и в ИЕ6 работало тоже…
                                            0
                                            «Втупую» как минимум двумя способами :)
                                              0
                                              Ну? Поделитесь эзотерикой?
                                                0
                                                Я, конечно, не верю, что вы этого не знаете, но продолжим «тупить» на потеху общественности :)

                                                способ №1
                                                a, a:visited {text-decoration:none; border-bottom:1px dashed}

                                                способ №2
                                                a, a:visited {text-decoration:none; background: url('/path_to/dashed.gif') 100% 0% no-repeat}
                                                  0
                                                  Вынужден Вас огорчить (хотя, может быть, Вы и не огорчитесь), но первый способ неправильно «эмулирует» подчёркивание, т. к. оно должно пересекать части символов, находящиеся ниже text-line (например, хвостик у строчной буквы «р»), а второй — хоть и может расположить подчеркивание на нужном вертикальном уровне, но не может расположить его поверх свисающих «хвостиков», как хотелось бы…

                                                  Вобщем, тема для размышлений, спасибо за наводку!
                                                    0
                                                    В 98.5% случаев подчеркивание того же цвета, что и цвет букв, т. о. не важно, выше или ниже лежит эта фоновая картинка
                                                    0
                                                    Естественно, последний пример repeat-x :-D
                                                      0
                                                      Про последний пример ещё разок (не знаю, вставится ли сюда картинка):


                                                      (И на всякий случай ссылка на картинку: www.picamatic.com/show/2008/10/28/06/07/1262968_600x150.gif)
                                                        0
                                                        Отписал выше по теме, про это в курсе ;)
                                                          0
                                                          Всё, сдаюсь, домой хочу :)
                                                          Приятно было подискутировать на такую бесшабашную тему :) Удачи!
                                                      0
                                                      И, кстати, ещё момент: у инлайновых элементов ИЕ не видит бордер :(
                                                        0
                                                        А вы margin снизу добавьте равный толщине border
                                                          0
                                                          Не помогает :(
                                                          (Вот тут уже и правда попахивало тайными знаниями :))
                                                            0
                                                            Ну тогда небольшой padding-bottom для контейнера со ссылкой спасет отца русской демократии :)
                                                              0
                                                              Хм, сработало… Но засовывать ссылку в дополнительный контейнер? Фи! :)
                                              0
                                              e1.nnov.ru/webapp/

                                              Not Found
                                              The requested URL /webapp/ was not found on this server.
                                                0
                                                Да-да… Надо было выкладывать на что-то более надежное, чем тот хостинг…

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

                                              Самое читаемое