У меня проблема с vw, которую я не могу объяснить. В футере я создал divсшириной: 50 vwи когда я захожу посмотреть результат на сайте, то вижу, что он не доходит ровно до половины. Это также может быть проблемой с отображением сетки, но когда я использую инструмент разработчика Google, первая ширина div совпадает со второй, а также div в футереимеет одинаковуюширину.
Документ


Главная

История

Продукты

Капелли



Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut neque, eius, perspiciatis fugit rerum magnam vel illo repellat Provident a porro totam doloribus voluptates nihil quas facilis commodi? Reiciendis, ducimus.Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut neque, eius, perspiciatis fugit rerum magnam vel illo repellat Provident a porro totam doloribus voluptates nihil quas facilis commodi? Reiciendis, ducimus.Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut neque, eius, perspiciatis fugit rerum magnam vel illo repellat Provident a porro totam doloribus voluptates nihil quas facilis commodi? Рейсиендис, ducimus.c Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut neque, eius, perspiciatis fugit rerum magnam vel illo repellat Provident a porro totam doloribus voluptates nihil quas facilis commodi? Reiciendis, ducimus.Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut neque, eius, perspiciatis fugit rerum magnam vel illo repellat Provident a porro totam doloribus voluptates nihil quas facilis commodi? Reiciendis, ducimus.Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut neque, eius, perspiciatis fugit rerum magnam vel illo repellat Provident a porro totam doloribus voluptates nihil quas facilis commodi? Reiciendis, ducimus.


Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut neque, eius, perspiciatis fugit rerum magnam vel illo repellat Provident a porro totam doloribus voluptates nihil quas facilis commodi? Reiciendis, ducimus.Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut neque, eius, perspiciatis fugit rerum magnam vel illo repellat Provident a porro totam doloribus voluptates nihil quas facilis commodi? Reiciendis, ducimus.Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut neque, eius, perspiciatis fugit rerum magnam vel illo repellat Provident a porro тотальная болезненная сладострастность nihil quas facilis commodi? Reiciendis, ducimus. dvg хх *{ размер коробки: border-box; маржа: 0%; семейство шрифтов: Comic Sans MS, Comic Sans, курсив; } } div: имеет (изображение) { высота строки: 0 %; } } изображение { ширина: 100 %; высота: 100 %; объект-пригонка: обложка; } } заголовок { дисплей: гибкий; цвет фона: # F5B01B; положение: липкое; оправдание-содержание: пространство-вокруг; выровнять элементы: по центру; верх: 0 пикселей; высота: 8вх; z-индекс: 1; } } заголовок div { ширина: расчет (110 пикселей + 3%); объект-пригонка: обложка; } } .символ { дисплей: гибкий; выровнять элементы: по центру; оправдание-содержание: центр; } } img[alt="smbl"]{ высота: 18 пикселей; ширина: 18 пикселей; объект-пригонка: обложка; } } img[alt="Логотип"]{ высота: 100 %; ширина: 100 %; объект-подходит: содержать; } } .imagine1{ цвет фона: #75540D; высота: 50вх; ширина: 100 %; } } .салон{ ширина: 100 %; высота: 100 %; объект-подходит: содержать; непрозрачность: 0,9; } } основной { основной { дисплей: сетка; столбцы-шаблона сетки: 1fr 1fr 1fr 1fr 1fr; сетка-авто-строки: Calc (50vw); } } .div1{ сетка-колонна: 1/4; текст-выравнивание: по центру; цвет фона: # F7C865; } } .div2{ .div2{ сетка-столбец: 4/7; текст-выравнивание: по центру; цвет фона: # F7C865; } } нижний колонтитул { цвет фона: шоколадный; высота: 10вх; } } нижний колонтитул > div { цвет фона: аквамарин; ширина: 50мм; } } первый элемент grid второй элемент grid div в нижнем колонтитуле
Я пытаюсь изменить vw в %, и это работает, но я хочу узнать, почему с помощью этого метода код не работает. спасибо
Мобильная версия