Как растянуть div-блок на всю ширину страницы?

Рейтинг: 3Ответов: 1Опубликовано: 14.09.2014

Проблема в том, что через комп див блок растягивается правильно, во всю ширину страницы, а через планшет или телефон див растягивается до границы экрана, а при прокрутке вправо или уменьшении масштаба там и остаётся. Скрин в самом низу с примером меньшенного масштаба. Блок отмечен красной стрелкой.

Что пробовал и не помогало:

body { width: 100%; height: 100%; }
.div { min-width: 100%; min-height: 100%; position: relative; }

alt text

css html
Источник: Stack Overflow на русском

Ответы

▲ 6Принят

Так происходит, когда блоки сайта не помещаются в ширину экрана и остаются за его границами. Одно из следствий - появляется горизонтальный скролл. При этом те блоки, ширина которых была задана как width: 100% - остаются с такой шириной. В итоге вы скроллите вправо, и видите пустую область.

Решить это быстро можно вот так:

body {
  min-width: 1000px;
}

Этим вы зададите для страницы минимальную ширину, в которую все ваши блоки гарантированно впишутся. И даже если ширина экрана будет недостаточной для отображения всех блоков, и появится горизонтальный скролл - блоки с width: 100% будут отображаться во всю указанную ширину 1000px.

Плюс, полезно бывает задать эту же величину в мета-теге в head:

<meta name="viewport" content='width=1000' />

Таким образом, заходя с мобильного, вы будете видеть всю страницу целиком, максимально "отзумленную".