Как сделать div 100% по ширине на мобильном?

250

21 декабря 2016, 02:44

Условия: на страницах есть блоки разной ширины, заданные в пикселях. Надо добавить еще один блок на 100% ширины.

Проблема: Если к существующему блоку шириной, например, в 1000px, добавить блок с width = 100%, то на устройствах с шириной экрана меньше 1000px, браузер масштабируется так, чтобы блок 1000px влез целиком. При этом блок с width = 100% получается шириной, равной физической ширине экрана. Т.е. в цифрах - экран 412х732. Вот блок и получается шириной 412 пикселей, а не желаемые 1000. Визуально блок с width = 100% не на весь экран. А 1000px — на весь.

Если блоку жестко задать 1000, то конечно все получится, но максимальная ширина блоков (и их количество) на странице не известна - она может быть разной.

В примере ниже два блока должны быть одной ширины. Поменять всю существующую верстку под какой-либо правильно-кошерный вариант не получится, можно только добавить любой javascript и любой css для div2.

.div1 { 
  width: 1000px; 
  background-color: red; 
  height: 100px; 
} 
 
.div2 { 
  width: 100%; 
  background-color: green; 
  height: 100px; 
}

<html> 
  <head> 
    <meta name="viewport" content="width=device-width" /> 
  </head> 
  <body>   
    <div class="div1">width: 1000px</div> 
    <div class="div2">width: 100%</div> 
  </body> 
</html>

Скриншот того, что получается:

Answer 1

Добавьте для body стиль display: inline-block;:

body { 
  display: inline-block; 
} 
 
.div1 { 
   width: 1000px; 
   height: 100px; 
   background-color: red; 
} 
.div2 { 
   width: 100%; 
   background-color: green; 
   height: 100px; 
}

<div class="div1">width: 1000px</div> 
<div class="div2">width: 100%</div>

Создание интернет-магазина кофе и чая в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как правильно сделать линию на сайте?

В общем, есть такая структураКак правильно сделать в коде эти линии чтобы при изменение разрешения они не плавали (горизонтальные линии)?...

309

HTML

Sublime Text 3: проблемы с кодировкой HTML-файлов

Есть вёрстка в файлах html, которую надо натянуть на cmsОткрываю в Notepad++ - всё норм:

442

HTML

Удаление содержимого div html

Есть div, в него вставляю данные, которые приходят от ajax запроса:

281

HTML

Clearfix. Где ошибка?

Не могу разобрать с clearfixПо задумке блок div3 не должен залезать на плавающие элементы

331