Футер на всю ширину браузера?

Question

[Игорь Пушкарский]

Добрый день!

в общем суть вопроса такова есть макет (навалял для примера ), если взглянуть в код то можно увидеть что основная часть сайта header и midlle резиновая от 1600 до 1020px, а footer статичный и всегда на всю ширину, только при уменьшении окна меньше 1020px он вдруг начинает уменьшатся и выравниваться с левой стороны, и перестает быть на всю ширину.

Почему это так?
Везде ли это так?
Как с этим бороться?

Answer 1

[Eugene_Sh]

У Вас у класса wrapper min-width > max-width.
У футера зададите min-width равное min-width класса wrapper и после этой ширины он не будет уменьшаться.

Comments

[Игорь Пушкарский]

Я это заметил поправил попробовал, работает=) Залил на сайт не работает=)
46.172.191.204:8181/gic

[Игорь Пушкарский]

А есть предложения почему не работает без min-width?

[ModestesGonze]

@RainMEN что-то не видно чтобы вы залили на сайт.
Просто укажите для класса .foo min-width: 1020px; можно прямиком body задать.
А по поводу "почему не работает без min-width", по умолчанию блочный элемент имеет значение width: auto; т.е. тянется на всю ширину, соответственно ширина уменьшается при ресайзе браузера. А min-width позволяет зафиксировать ширину элемента на указанном минимальном значении.

[Игорь Пушкарский]

На сайте я тестирую, поэтому вы и не увидели это, вопрос то ка раз в том почему при width:auto при уменьшении окна браузера блок foo не тянется на всю ширину а делается 80-90%?

[Eugene_Sh]

@RainMEN При уменьшении - width в данном случае принимает значение, которое равно ширине окна браузера. Но у тебя есть элементы, которые имеют минимальную ширину, они не уменьшаются и создают горизонтальный скролл.

[Игорь Пушкарский]

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

[Eugene_Sh]

@RainMEN Блочный элемент имеет "width: auto;", в данном случае он будет равен 100% и равен области отображения браузера. Если не указать min-width, то он будет уменьшаться, если мы уменьшаем окно браузера. Если указать min-width, то он ограничит контент по ширине и не будет уменьшаться, хоть и имеет 100% по ширине. Можно описать как интервал min-width > width > max-width, ширина будет в этом диапазоне.

[Игорь Пушкарский]

Вот спасибо. Я почему то сперва не принял во внимание что ширина 100% это ширина окна браузера, а не ширина body.