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

#html #css

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

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

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



    

Ответы

Ответ 1

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

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

body {
  min-width: 1000px;
}


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

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




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