Растянуть элемент на всю ширину
Как растянуть элемент на всю ширину если у родителя уже задано ограничение в ширине в 1000px? Причем, без абсолютного позиционирования или сделать так, чтобы в определенном моменте это позиционирование убрать, что бы он не был поверх нижних элементов, футера например.
Для современных браузеров можно использовать такой вариант:
для нужного элемента прописать стили:
Положите оба блока в один общий блок с шириной равной ширине экрана и задайте этому общему блока overflow-x: hidden. Затем блоку который хотите растянуть на ширину экрана задайте св-ва вроде таких
Такой блок не будет перекрывать нижеидущие по коду блоки. Если этот блок имеет заданную высоту и должен идти фоном, то следующие блоки можно, например, «поднять» отрицательным margin-top
Как сделать DIV на весь экран, перекрывающий всю страницу, с помощью CSS
К поиску ответа на вопрос «Как сделать DIV на весь экран, перекрывающий всю страницу, с помощью CSS» обычно обращаются в двух случаях. Во-первых, чтобы соблюсти требование закона и скрыть контент от пользователей не доросших для его просмотра. Во-вторых для того, чтобы оградить контент своего сайта от копирования. В данной статье рассмотрим то, как создать такой div , который перекрывает всю страницу и которым можно спрятать весь контент, а можно просто его уберечь от простого копирования. Но всё это конечно легко обходится, поэтому для себя я озадачился этим вопросом только для того, чтобы соблюсти закон на части своих страниц одного проекта (где про алкоголь и сигареты — иначе Google AdSense ругается).
Рабочий пример css-кода с блокирующим весь экран div (на всю ширину и всю высоту экрана)
Сразу приведу готовый код страницы с блокирующим весь экран div , который занимает всю ширину и всю высоту экрана (при условии, что у тега <body> не переопределены высота и ширина, так как div наследует высоту и ширину от body , в котором он располагается):
Где разместить и как обозначить div , блокирующий всю ширину и высоту экрана
Сам div можно вставить в любое место в коде страницы только так, чтобы он был вложен только в <body> . Это может потребоваться для того, чтобы запутать пользователя, желающего обойти этот div и всё-таки добраться до контента страницы, но это будет наверняка тщетно — все современные браузеры идут в комплекте с инструментами разработчика и всё это быстро находится и обходится. Поэтому проще вставить этот div перед закрывающим тегом </body> или сразу после <body> — там ему самое место.
Для того, чтобы было проще управлять стилями этого div , зададим ему класс content-blocker (см. стр.19):
Можно наполнить его содержимым, но это уже в зависимости от поставленной задачи.
CSS-стили div’а, расположенного на всю ширину и высоту экрана
Ну и собственно нужно прописать стили, которые растянут этот div на 100% ширины и 100% высоты экрана, поместят его поверх всех элементов страницы и не дадут ему сдвинутся с места. Стили нужно задать в контейнере head:
Итак свойства по порядку и то, что они делают:
- Свойство position: fixed; — нужно для того, чтобы даже при скроллинге длинных страниц наш div жёстко занимал свою позицию и перекрывал весь контент.
- Свойства top: 0; и left: 0; — задают координаты начала div, даже если у тега <body> они были перееопределены, а такое случается достаточно часто.
- Свойства width: 100%; и height: 100%; — наследуют 100% ширины и 100% высоты контейнера <body> . Можно конечно задать в абсолютных значениях километровые размеры, но зачем, если весь контент на правильно свёрстанных сайтах выводится в те размеры, которые занимает <body> , а то, что не попадает в эти размеры, обычно находится вне зоны видимости и не видно пользователю?
- Свойство background-color: rgba(136, 136, 204, 0.5); — требуется задать, если нужно перекрыть пользователю просмотр (тогда прозрачность должна быть либо вообще не задана, либо равняться 1 ). Если это свойство не задать, div будет прозрачным: всё будет видно, но скопировать что-либо со страницы будет невозможно без вмешательства с помощью инструментов разработчика браузера (которые включаются в два клика, и одной кнопкой удаляют этот div — это к тому, что так защищают контент только от совсем ничего не умеющих и ничего не знающих пользователей, которые вряд ли что-то будут копировать и тиражировать с сайта).
- Свойство z-index: 4444; — это для того, чтобы поднять div над всеми слоями. Если что-то будет всё-равно торчать, просто нужно посмотреть z-index торчащего элемента и выставить ещё больший z-index для нашего div .
Выводы:
Так можно просто и быстро создать перекрывающий всю страницу div , который надёжно спрячет контент во исполнение законов, но вряд ли защитит от тех, кто ворует контент. Всё, что опубликовано в интернете и отображается в браузере, можно с теми или иными усилиями утащить, уж поверьте. И чем сложнее навороты, тем сложнее обслуживать сайт, так что борьба с воровством контента в плане его защиты от копирования, — заранее проигрышная тема.
Заберите ссылку на статью к себе, чтобы потом легко её найти!
Выберите, то, чем пользуетесь чаще всего:
CSS width 100%. Блок, который занимает всю ширину веб-страницы.
В современной верстке, на веб-страницах часто можно встретить блоки, которые занимают 100% ширины страницы.
Это выглядит вот так:
Давайте разберемся, каким образом можно добиться такого эффекта.
Для примера, давайте рассмотрим следующую ситуацию.
Смотрим на результат, который получился.
Больше моих уроков по HTML, CSS и верстке сайтов здесь.
В целом хорошо, но по бокам блока видны небольшие отступы, которые портят всю картину. Хотелось бы их убрать.
Первое, что приходит на ум, это присвоить блоку свойство width:100%. Но, это никак не изменит ситуацию. Можете сами в этом убедиться.
Поэтому свойство width:100% можете смело убирать.
В чем же реальная причина таких отступов?
Дело в том, что блок div, ширину которого мы хотим сделать 100% хранится в двух родительских элементах body и html. По умолчанию, браузеры задают им определенные значения для свойств padding и margin.
Для того, чтобы решить проблему, нужно всего-лишь обнулить эти отступы. Сделать это очень просто:
Полноэкранные контейнеры внутри элементов ограниченной ширины
Несколько месяцев назад я добавил себе в закладки твит, это был настоящий трюк CSS, то есть именно то, что мы любим.
Итак, вопрос: как сделать контейнер полноэкранной ширины внутри родительского элемента ограниченной ширины?
Введение
Мы хотим растянуть это изображение ровно на ширину окна браузера.
Вот минимально необходимая для этого разметка:
Размышления
Если бы мы могли использовать абсолютное позиционирование, мы бы задали контейнеру left: 0; и width: 100%; , но мы не можем этого сделать, так как хотим, чтобы контейнер остался в потоке.
Можем ли мы применить отрицательные внешние отступы с каждой стороны, тем самым раздвинув контейнер наружу? В некоторых обстоятельствах можем!
Ширина родительского элемента задана в процентах
Предположим, что ширина родительского элемента 60% и он центрирован. Это значит, что у нас есть по 20% ширины с каждой стороны. Но внешний отступ расчитывается исходя из ширины родительского элемента, а не всей ширины; в нашем случае 20% от ширины экрана это 33% от ширины родительского элемента.
Ширина родительского элемента задана в пикселях
В большинстве случаев у нас нет достаточной информации о том, насколько надо расширять контейнер до полной ширины при помощи отрицательных внешних отступов.
Мы можем использовать ширину окна браузера в наших расчетах CSS. Расстояние, на которое нам надо расширить контейнер влево и вправо это половина ширины окна браузера плюс половина ширины родительского элемента (мы исходим из того, что родительский элемент центрирован).
Итак, ширина родительского элемента 500 пикселей:
Фиксированная ширина вроде этой немного тревожит (а что будет на экранах меньшей ширины?), все это стоит обернуть медиа-запросом, чтобы правила срабатывали только на больших экранах:
Так как в нашей демонстрации используется изображение, имеет смысл добавить стили и ему, типа .full-width img < width: 100%; >, чтобы изображение могло занять весь экран.
Чтобы было еще проще, вы можете поэкспериментировать с демо, приведя расчеты к следующему виду:
Метод с трансформацией
Мы, как правило, не задействуем анимации, но в качестве решения для расширения контейнера можно использовать и свойства трансформации.
Директива @supports()
Предыдущая идея была взята из пена Брэндона Мэтиса, он обертывал свой код директивой @supports .
Идея состоит в том, что эти правила не будут применяться, если браузер не поддерживает единицы измерения, относительные размеров экрана. Таким образом вы можете добавить запасной вариант к CSS и переписать эти правила.
Кажется неплохой идеей, но у меня в ходе тестирования только Firefox сработал правильно. Chrome может иногда некорректно применить медиа-запрос, когда этого делать не надо (см. скриншот — я написал “иногда”, так как похоже, что это исправляется после переотрисовки). Edge не применяет медиа-запрос совсем (скриншот), возможно, эти баги связаны с вложением директив CSS (@-правил).
Метод без использования calc()
Свен Вольферманн последовал идее Джона Нила, с которой нам не нужны расчеты с помощью calc() :
А вот сама идея: сдвинуть контейнер в центр браузера с помощью left: 50%; , а затем вернуть его к левому краю с помощью отрицательного внешнего отступа в -50vw .
Красота! Таким образом вам не нужно вообще никакой информации о родительском элементе. Но запомните: также как и в случае с calc() , этот вариант также требует центрирования родительского элемента.
Вы можете подумать, а зачем задействовать right и margin-right ? Действительно, вы можете обойтись без них на обычном сайте, текст которого располагается слева направо, но мы учитываем и вариант с direction: rtl; , таким образом, делая код пуленепробиваемым.