в общем суть вопроса такова есть макет (навалял для примера ), если взглянуть в код то можно увидеть что основная часть сайта header и midlle резиновая от 1600 до 1020px, а footer статичный и всегда на всю ширину, только при уменьшении окна меньше 1020px он вдруг начинает уменьшатся и выравниваться с левой стороны, и перестает быть на всю ширину.
Почему это так?
Везде ли это так?
Как с этим бороться?
@RainMEN что-то не видно чтобы вы залили на сайт.
Просто укажите для класса .foo min-width: 1020px; можно прямиком body задать.
А по поводу "почему не работает без min-width", по умолчанию блочный элемент имеет значение width: auto; т.е. тянется на всю ширину, соответственно ширина уменьшается при ресайзе браузера. А min-width позволяет зафиксировать ширину элемента на указанном минимальном значении.
На сайте я тестирую, поэтому вы и не увидели это, вопрос то ка раз в том почему при width:auto при уменьшении окна браузера блок foo не тянется на всю ширину а делается 80-90%?
@RainMEN При уменьшении - width в данном случае принимает значение, которое равно ширине окна браузера. Но у тебя есть элементы, которые имеют минимальную ширину, они не уменьшаются и создают горизонтальный скролл.
@RainMEN Блочный элемент имеет "width: auto;", в данном случае он будет равен 100% и равен области отображения браузера. Если не указать min-width, то он будет уменьшаться, если мы уменьшаем окно браузера. Если указать min-width, то он ограничит контент по ширине и не будет уменьшаться, хоть и имеет 100% по ширине. Можно описать как интервал min-width > width > max-width, ширина будет в этом диапазоне.
