Div ширины 100% обрезается при прокрутке вправо, если окно моего браузера меньше, чем содержимое div

Question

У меня была проблема на моем собственном сайте с <div>, который должен иметь ширину 100%.Код для этого показан ниже.

#myDiv {
    width: 100%;
    height: 160px;
    background: #f48;
}

Это прекрасно работает, за исключением следующего вопроса:

Когда окно моего браузера меньше, чем содержимое <div>, и я прокручиваювправо, тогда мой <div> будет перемещаться влево с остальной частью страницы, а не занимать 100% ширины области прокрутки страницы.

Эта проблема вызывала у меня проблемы в течение нескольких часов и совсем недавноЯ понял, что многие другие сайты имеют такую ​​же проблему.Включая Facebook.com и Stackoverflow.com, просто посмотрите на мои снимки ниже.

Ошибка Facebook:

Ошибка Stackoverflow:

Answer 1

Ок, решил!Мне просто нужно установить свойство min-width равным ширине содержимого <div>.

Спасибо, ребята!

Answer 2

Я решил эту проблему для себя с display: inline-block.Вот пример: http://jsfiddle.net/z01g0r2d/1/.Обратите внимание, что если вы попытаетесь установить ширину длинного содержимого, например, 200%, решение перестанет работать.

Answer 3

Я пробовал width: auto;, и это помогло.

Answer 4

Как вы пробовали это? Протестировано в IE7:

html, body {
    position:relative;
    overflow:hidden;
    margin:0 auto !important;
}