3

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

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

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

alt text

4
  • А если вместо min-width - width: 100%;
    – soledar10
    14 сен 2014 в 14:51
  • Одинаково =( 14 сен 2014 в 15:02
  • что то явно мешает, надо смотреть код и стили. Если нет, то можно попробовать так .div { position: absolute; width: 100% } Только контент нужно будет отодвинуть на высоту этого блока вниз.
    – webphp
    14 сен 2014 в 15:14
  • Абсолют не подходит. При полном экране всё нормально, как браузер уменьшаю, при прокрутке вправо блок остаётся на месте. 14 сен 2014 в 15:33

1 ответ 1

6

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

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

body {
  min-width: 1000px;
}

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

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

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.