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

djflorfila

djflorfila

Мастер
Регистрация
13 Янв 2013
Сообщения
109
Реакции
32
Не стал создавать новую тему...
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 не подключал для сокращения примера)
Получаем такую картину:


ad5ebf77885f.jpg

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


Как от этого избавиться??? :confused: Как добиться равной ширины HEAD & FOOTER по отношению к BODY при увеличении, чтобы получалось так:
7f103d5df7a5.jpg
 
djflorfila написал(а):
Не стал создавать новую тему...
1-й раз полностью вручную верстаю достаточно сложный шаблон под WP с множеством виджетов. Уже многое сделано, но возникла 1 неприятная загвоздка. Подскажите пожалуйста как правильно решить задачу?! :thenks:
Нажмите для раскрытия...
В таблице стилей для body допиши overflow-x:hidden
 
Всё же оказалось не совсем то, что требовалось. overflow-x запретил прокрутку по X. Если вставить контент в зону BODY и увеличить его, например на 150%, то контент уйдет за страницу и его никак не просмотреть =(

Вот что получается:
9e506b385018.jpg

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

Найдите, почитайте, про reset и normalize - выберите, что-то из этого. Тогда потеряет отступы на странице которые накладывает сам браузер. И визуально - не будет такого выступа как сейчас. Но при этом body так и будет продолжать выходить за ширину экрана - это собственно, нормальное поведение. Смысла с этим бороться не вижу.
 
Для просмотра ссылки Войди или Зарегистрируйся
mdss написал(а):
В таблице стилей для body допиши overflow-x:hidden
Нажмите для раскрытия...
тут mdss имел ввиду тег <body style="overflow-x: hidden">, а не <div> "body"

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

тут mdss имел ввиду тег <body style="overflow-x: hidden">, а не <div> "body"

так не будет прокрутки горизонтальной (что уже посимпатичнее гораздо), но сам див все равно не войдет и его отрежет.
Нажмите для раскрытия...
Это я понял. Вариант не подошёл =)
 
Укажи для 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>
 
VaLeXaR написал(а):
Укажи для 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>
Нажмите для раскрытия...
Спасибо за совет. Кажется помогло. Буду тестировать на всём шаблоне :ay:

---

p.s.: это именно то, что было нужно! Спасибо огромное!!!!!!!!!! :thenks:
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху