Как сделать так, чтобы элемент растягивался на 100% ширины экрана в предопределенной теме?
Эта статья является частью серии статей о том, как создать современную простую HTML-страницу. Если вы заинтересованы в получении первого доступа к такому контенту, обязательно подпишитесь на рассылку новостей.
Есть два известных мне способа растянуть элемент на 100% ширины представления. И, возможно, еще несколько. Один из способов — убедиться, что элемент не имеет ограничивающей оболочки, а затем добавить правило CSS, чтобы сделать элемент 100%, как показано ниже.
Изображение
Однако это не всегда возможно, особенно если вы используете структуру сетки, поскольку для этого обычно требуется оболочка, как показано ниже.
Изображение
Это еще более верно, если вы используете динамически генерируемые шаблоны как часть CMS или фреймворка и хотите добавить правило только к нечетному изображению, цитируемому тексту или фрагменту кода в статье.
В этой ситуации, скорее всего, у вас есть не только ограничивающая сетка-оболочка, но и оболочка, обертывающая содержимое статьи, или различные другие оболочки div.
Итак, как вы справляетесь с этим сценарием? Читай дальше что бы узнать.
В этой статье я покажу вам, как сделать элемент шириной 100 % от ширины окна просмотра, когда вам приходится иметь дело с динамически генерируемыми шаблонами и вы не можете изменить вывод из-за необходимости переписать слишком много кода. Этот метод требует, чтобы вы добавили оболочку и/или класс к элементу или разделу, который вы хотите растянуть до 100% ширины представления, и использовали немного CSS. Вы также можете использовать псевдоклассы, если вы являетесь мастером CSS.
Хорошо, давайте быстро рассмотрим пример.
Подготовка HTML
Подготовка HTML очень проста. Это так же просто, как добавить класс в тег HTML, который оборачивает то, что вы хотите расширить до 100% ширины представления. Вам также может понадобиться добавить оболочку, если вы не можете использовать уже существующую.
Для тех из вас, кто является мастерами CSS и ниндзя, вы также можете использовать псевдокласс.
Теперь, когда мы выбрали элемент, мы можем добавить правило CSS на следующем шаге
Волшебный CSS, чтобы заставить ваш элемент сломать все границы и сделать то, что кажется невозможным
Используя наш селектор, который в данном случае представляет собой div с классом сто-vw, мы можем сделать элемент 100vw с 4 свойствами изложено ниже:
.сто-vw {
ширина: 100vw;
положение: родственник;
максимальная ширина: 100vw;
слева: 50%;
поле слева: -50vw;
} - Первое, что нам нужно сделать, это добавить в правило свойство position и сделать его относительным. Убедитесь, что вы используете относительный здесь, так как другие значения положения не будут работать.
Связанный: Позиционирование CSS с использованием свойства Position
- Добавьте пару свойство-значение max-width 100vw. Без этого эта техника не работает.
- Затем сдвиньте элемент влево, используя свойство left, это эффективно отменяет любое позиционирование, и, как вы увидите, теперь он находится наполовину за пределами правой стороны страницы.
- Добавьте отрицательную маржу 50vw, чтобы компенсировать позицию.
Все, остальное чисто стилевые предпочтения.
Предоставление элементу некоторого пространства внутри и снаружи
Предоставление элементу некоторого пространства сверху и снизу гарантирует, что элементы до и после не соприкасаются с ним. Затем добавьте отступы, чтобы переместить содержимое или элементы внутри от края.
Оба этих значения свойства могут быть установлены в правиле глобального уровня, если у вас есть система дизайна, но на всякий случай стоит упомянуть об этом.
Содержимое внутри
Чтобы разместить элемент(ы) внутри, вы можете добавить свойство display и расположить их таким образом. Например, вы можете добавить display: flex с justify-content: space вокруг вместо отступов или любого другого количества методов компоновки.
Идея снова состоит в том, чтобы дать немного свободного пространства и убедиться, что содержимое не касается краев, если, конечно, дизайн не предусматривает, чтобы содержимое касалось краев, например, фоновое изображение во всю ширину.
Что ж, я надеюсь, что это было полезно, чтобы увидеть, как вы можете применить несколько правил к элементу, чтобы добиться хорошего эффекта, чтобы фон раздела покрывал 100% ширины страницы или 100vw. Поэкспериментируйте, посмотрите, что произойдет, если вы сделаете его равным 90%, а затем переместите его вправо и добавите правильное поле. Это то, что я делаю здесь, экспериментируйте, чтобы увидеть, что произойдет.
Спасибо, что заглянули в дизайн-кодзё-додзё и не забудьте подписаться на информационный бюллетень, чтобы получать полезные HTML и CSS-коды в свой почтовый ящик.
До новых встреч, друзья, сайонара, адиус, киа ора.
Растягивание сетки изображения на весь экран — Общее — Forum
kparkour (Кайли Паркер) 1
У меня есть изображения в сетке, которые я хочу сгруппировать вместе и растянуть, чтобы заполнить экран без пробелов. Однако, когда проект сохраняется, он автоматически добавляет пустое пространство к самым внешним столбцам. Любые советы о том, как решить эту проблему?
Вот мой сайт Только для чтения: ССЫЛКА
(как поделиться ссылкой на свой сайт только для чтения)
matthewpmunger (Мэтью П. Мангер) 2
Привет, @kparkour, не могли бы вы опубликовать скриншот проблемы и ссылку на общий доступ к вашему проекту, доступную только для чтения. (как поделиться ссылкой на ваш сайт только для чтения)
Это действительно помогло бы сообществу на форуме помочь вам.
паркур (Кайли Паркер) 3
Снимок экрана 07 января 2022 г., 26.11.24, 1920×1106 184 КБ
91e7fbb9471e6c23f62d7290e743&рабочий процесс=предварительный просмотрпаркур (Кайли Паркер)
Спасибо, только что добавил. Это будет исправлено на некоторое время после сохранения, а затем пробел вернется.
Мэтьювпмангер (Мэтью П. Мангер) 5
Итак, я не смог воспроизвести пробел в вашем проекте. Если это будет продолжаться, можете ли вы записать GIF или видео, где это происходит?
У меня есть предложение, которое может помочь. Вместо использования auto для ширины столбцов сетки попробуйте вместо этого использовать 1fr .