Выровнять размер контейнеров

Тема в разделе "Верстка", создана пользователем djflorfila, 22 июл 2013.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. djflorfila

    djflorfila Постоялец

    Регистр.:
    13 янв 2013
    Сообщения:
    109
    Симпатии:
    28
    Не стал создавать новую тему...
    1-й раз полностью вручную верстаю достаточно сложный шаблон под WP с множеством виджетов. Уже многое сделано, но возникла 1 неприятная загвоздка. Подскажите пожалуйста как правильно решить задачу?! :thenks:

    Что требуется (для примера:(
    • 1 див HEAD растянутый на 100% по ширине + фикс высоты 100px
    • 1 див BODY фикс ширины 1000px + минимальная высота 300px
    • 1 див FOOTER растянутый на 100% по ширине + фикс высоты 50px
    Примерный код:
    Код:
     
    <div style="background: #FF6633; height: 100px;    width: 100%;">head</div>
    <div style="background: #FFCC33; min-height: 300px; width: 1000px; margin: auto;">body</div>
    <div style="background: #33CC33; height: 50px; width: 100%;">footer</div>
    
    (css не подключал для сокращения примера)
    Получаем такую картину:


    [​IMG]
    Всё вроде бы неплохо, но, если применить увеличение страницы, скажем на 150% и более, и прокрутить страницу до конца вправо, то получаем следующее:
    [​IMG]

    Как от этого избавиться??? :confused: Как добиться равной ширины HEAD & FOOTER по отношению к BODY при увеличении, чтобы получалось так:
    [​IMG]
     
  2. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.126
    Симпатии:
    668
    В таблице стилей для body допиши overflow-x:hidden
     
  3. djflorfila

    djflorfila Постоялец

    Регистр.:
    13 янв 2013
    Сообщения:
    109
    Симпатии:
    28
    Всё же оказалось не совсем то, что требовалось. overflow-x запретил прокрутку по X. Если вставить контент в зону BODY и увеличить его, например на 150%, то контент уйдет за страницу и его никак не просмотреть =(

    Вот что получается:
    [​IMG]
    Впадаю в отчаяние :alko:
     
  4. aaliseyko

    aaliseyko Создатель

    Регистр.:
    17 ноя 2011
    Сообщения:
    17
    Симпатии:
    6
    А вы собственно чего хотели? У вас head и footer имеют относительные ширины. А body фиксированную. При указании масштабирования страницы в 150% у вас body увеличивается соответственно в полтора раза и в итоге выходит за границу экрана. Тогда как head и footer остаются вписанными в 100%.
    Осталось выяснить в 100% чего они вписаны. ;)

    Найдите, почитайте, про reset и normalize - выберите, что-то из этого. Тогда потеряет отступы на странице которые накладывает сам браузер. И визуально - не будет такого выступа как сейчас. Но при этом body так и будет продолжать выходить за ширину экрана - это собственно, нормальное поведение. Смысла с этим бороться не вижу.
     
  5. aaliseyko

    aaliseyko Создатель

    Регистр.:
    17 ноя 2011
    Сообщения:
    17
    Симпатии:
    6
    djflorfila,
    тут mdss имел ввиду тег <body style="overflow-x: hidden">, а не <div> "body"

    так не будет прокрутки горизонтальной (что уже посимпатичнее гораздо), но сам див все равно не войдет и его отрежет.
     
  6. djflorfila

    djflorfila Постоялец

    Регистр.:
    13 янв 2013
    Сообщения:
    109
    Симпатии:
    28
    Это я понял. Вариант не подошёл =)
     
  7. VaLeXaR

    VaLeXaR Создатель

    Регистр.:
    5 апр 2013
    Сообщения:
    45
    Симпатии:
    16
    Укажи для head и footer min-width: 1000px.
    Примерно так:
    <div style="background: #FF6633; height: 100px; min-width: 1000px; width: 100%;">head</div>
    <div style="background: #FFCC33; min-height: 300px; width: 1000px; margin: auto;">body</div>
    <div style="background: #33CC33; height: 50px; min-width: 1000px; width: 100%;">footer</div>
     
    zerofirefox и djflorfila нравится это.
  8. djflorfila

    djflorfila Постоялец

    Регистр.:
    13 янв 2013
    Сообщения:
    109
    Симпатии:
    28
    Спасибо за совет. Кажется помогло. Буду тестировать на всём шаблоне :ay:

    ---

    p.s.: это именно то, что было нужно! Спасибо огромное!!!!!!!!!! :thenks: