0

Условия: на страницах есть блоки разной ширины, заданные в пикселях. Надо добавить еще один блок на 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>

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

введите сюда описание изображения

1 ответ 1

4

Добавьте для body стиль display: inline-block;. Это будет работать, потому что 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>

4
  • Магия... Непонятно как, но работает и не ломает существующую верстку.
    – georgas
    19 дек 2016 в 8:42
  • @georgas Всё просто. inline-block позволяет элементу подстраиваться под величину контента. 19 дек 2016 в 8:46
  • Спасибо, очень помогло!
    – georgas
    19 дек 2016 в 8:48
  • Пожалуйста, очень приятно это слышать. 19 дек 2016 в 8:50

Ваш ответ

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

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