Как сделать div 100% по ширине на мобильном?
Условия: на страницах есть блоки разной ширины, заданные в пикселях. Надо добавить еще один блок на 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>Скриншот того, что получается:
Добавьте для 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>
-
18:43
Продвижение своими сайтами как стратегия роста и независимости
-
22:46
-
06:18
-
12:23
-
20:41
-
06:31
-
21:28
-
22:18
-
08:00
- Почему SERVER_ADDR имеет не тот IP 49999 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 31911 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 25960 visits
- Как через css изменить цвет png изображения? 11733 visits
- Blob video url download 11279 visits
- Php curl запрос через прокси с авторизацией 10685 visits
- Работа с captcha vk api 9481 visits
© "hostciti.net" 22.1.2026 | 12:26