Невозможно сделать ширину экрана div заполнением в Webkit (Chrome и Safari).

Question

У меня есть div, который я хочу использовать в качестве нижнего колонтитула страницы, и он должен занимать всю ширину страницы. Пока все так просто, вы могли бы подумать. И это в Firefox и IE.

К сожалению, в обоих основных браузерах webkit, несмотря на то, что мой нижний колонтитул (#footer) установлен на width:100%; max-width:none;, webkit не сможет заполнить ширину окна браузера.

Страница находится здесь: страница, демонстрирующая проблему

Что происходит? Любые решения?

Редактировать: все извинения - когда я сказал, что это работает в Safari, это была опечатка - я имел в виду firefox.

Скриншоты:

Вот это работает в IE:

Здесь он ломается в Chrome (такое же поведение в Safari). Стрелка нарисована от руки, для акцента.

Answer 1

Оказывается, следующая строка без комментариев вызывала проблемы:

#footer {  position: fixed;  bottom:0; left: 0; /*max-width: 11400px; max-width: none; width: 11400px;*/ width: 100%;  height:75pt;}

По какой-то причине WebKit увидел max-width: 11400px; max-width: none; width: 11400px; и установил ширину примерно в половину размера экрана.

Answer 2

Я запускаю Chrome, и он прекрасно работает для меня.Можете ли вы опубликовать скриншот?

Кроме того, ваш контент немного не в порядке, поэтому вот исправление:

Answer 3

Возможно, ваша проблема в том, что в нижнем колонтитуле есть родительский элемент с position:, установленным на что угодно Это создает так называемый стековый контекст. Если вы поместите нижний колонтитул в тело или в элемент размером с весь видовой экран, то 100% будет действительно 100% от видового экрана.

edit: Видимо, это не ваш ответ, а то, что обычно бывает в 99% случаев, поэтому я включаю его для справки.

Answer 4

in

#footer {
max-width:none;
}

это недопустимое замедление, поскольку оно недопустимо, оно перезаписывается на

.row {
max-width: 1140px;
}

для решения:

change

#footer{
max-width:100%
}

сделано!

Answer 5

Причиной этого является position:fixed на #footer.

Вы используете Firebug в Firefox? Это поможет вам отладить гораздо быстрее. Кроме того, рассмотрите возможность использования фреймворка, такого как 960gs, вместе с HTML5 Boilerplate Пола Айриша в качестве хорошей основы для построения.

Answer 6

У вас есть опечатка: width:100%;

edit: опечатка теперь исправлена ​​