Как заверстать блок во всю ширину окна внутри блока с произвольной шириной
Пока переделывал блог, захотелось, чтобы посреди поста можно было ворваться с каким-нибудь блоком во всю ширину окна. Например, вот так:
Ширина основной колонки с контентом при этом абсолютно произвольная и может меняться в зависимости от размеров окна, настроения браузера и фазы луны. Единственное, что про нее достоверно известно — она выровнена по центру:
Самый очевидный способ — прервать блок с контентом, сделать блок без маржинов, затем продолжить контент:
Проблема в том, что посты удобно писать маркдауном, а в маркдауне от такого способа получается адская каша, за которой сложно следить:
div class="text-content">
# Пост!
Бла бла бла-бла бла. Бла бла? Бла бла-бла.
. бла блабла:
div>
div class="fullwidth">
div>
div class="text-content">
Бла блаааа бла бла-бла.
div>А хочется вот так:
# Пост!
Бла бла бла-бла бла. Бла бла? Бла бла-бла.
. бла блабла:
div class="fullwidth">
div>
Бла блаааа бла бла-бла. Окей, вставляем блок в контент и даем ему width: 100vw :
Теперь его надо сдвинуть к левому краю окна. Расстояние неизвестно, но у нас есть ширина блока с контентом ( 100% ) и ширина окна ( 100vw ). Сначала двигаем блок направо с помощью margin-left: 50% :
Теперь блок начинается ровно с середины окна. Отнимаем 50vw , чтобы блок уехал к левому краю. Получается margin-left: calc(50% — 50vw) , блок встает на нужное место:
Стиль блока выглядит так:
.fullwidth
width: 100vw;
margin-left: calc(50% - 50vw);
>Класс, то что надо.
. или нет? А это что за хрень?
Горизонтальный скролл, блин, откуда?
Оказывается, ширина вертикального скроллбара включается в ширину вьюпорта, то есть 100vw — это больше, чем нам нужно, и появляется горизонтальный скролл. Не представляю, зачем это сделано именно так, не могу придумать случая, когда это было бы полезным.
А счастье было так близко. Окей, время костылей. Гуглением находится один приемлемый костыль: засунуть в скрипт, который будет класть в css-переменную 1vw здорового человека (то есть без учета ширины скроллбара) и пересчитывать его при ресайзах:
script>
(function ()
function setVw()
const vw = document.documentElement.clientWidth / 100;
document.documentElement.style.setProperty('--vw', `$vw>px`);
>
setVw();
window.addEventListener('resize', setVw);
>()); script>Теперь у нас есть переменная var(—vw) , в которой лежит нужное нам количество пикселей. Но по старой традиции лучше использовать ее с фоллбеком на обычный 1vw , вот так: var(—vw, 1vw) .
В результате стиль блока превращается в.
.fullwidth
width: calc(100 * var(--vw, 1vw));
margin-left: calc(50% - 50 * var(--vw, 1vw));
>Препроцессоры немного сглаживают эту жесть. Я себе сделал переменную $vw: var(—vw, 1vw) , мой стиль теперь выглядит как-то так:
.fullwidth
width: calc(100 * $vw)
margin-left: calc(50% - (50 * $vw))P.S. Скроллбары на маке
Если вы верстаете на маке, рекомендую включить в настройках системы постоянное отображение скроллбаров: сразу будут видны косяки с горизонтальным (а иногда и с вертикальным) скроллом.
Подавляющее большинство ваших пользователей на винде, где скроллбары всегда видны. Будьте чуть ближе к ним.
Как сделать DIV на весь экран, перекрывающий всю страницу, с помощью CSS
К поиску ответа на вопрос «Как сделать DIV на весь экран, перекрывающий всю страницу, с помощью CSS» обычно обращаются в двух случаях. Во-первых, чтобы соблюсти требование закона и скрыть контент от пользователей не доросших для его просмотра. Во-вторых для того, чтобы оградить контент своего сайта от копирования. В данной статье рассмотрим то, как создать такой div , который перекрывает всю страницу и которым можно спрятать весь контент, а можно просто его уберечь от простого копирования. Но всё это конечно легко обходится, поэтому для себя я озадачился этим вопросом только для того, чтобы соблюсти закон на части своих страниц одного проекта (где про алкоголь и сигареты — иначе Google AdSense ругается).
Рабочий пример css-кода с блокирующим весь экран div (на всю ширину и всю высоту экрана)
Сразу приведу готовый код страницы с блокирующим весь экран div , который занимает всю ширину и всю высоту экрана (при условии, что у тега не переопределены высота и ширина, так как div наследует высоту и ширину от body , в котором он располагается):
Пример DIV, перекрывающего весь экран .content-blocker тут контент страницы Где разместить и как обозначить div , блокирующий всю ширину и высоту экрана
Сам div можно вставить в любое место в коде страницы только так, чтобы он был вложен только в
. Это может потребоваться для того, чтобы запутать пользователя, желающего обойти этот div и всё-таки добраться до контента страницы, но это будет наверняка тщетно — все современные браузеры идут в комплекте с инструментами разработчика и всё это быстро находится и обходится. Поэтому проще вставить этот div перед закрывающим тегом или сразу после — там ему самое место.Для того, чтобы было проще управлять стилями этого div , зададим ему класс content-blocker (см. стр.19):
Можно наполнить его содержимым, но это уже в зависимости от поставленной задачи.
CSS-стили div’а, расположенного на всю ширину и высоту экрана
Ну и собственно нужно прописать стили, которые растянут этот div на 100% ширины и 100% высоты экрана, поместят его поверх всех элементов страницы и не дадут ему сдвинутся с места. Стили нужно задать в контейнере head:
.content-blocker Итак свойства по порядку и то, что они делают:
- Свойство position: fixed; — нужно для того, чтобы даже при скроллинге длинных страниц наш div жёстко занимал свою позицию и перекрывал весь контент.
- Свойства top: 0; и left: 0; — задают координаты начала div, даже если у тега они были перееопределены, а такое случается достаточно часто.
- Свойства width: 100%; и height: 100%; — наследуют 100% ширины и 100% высоты контейнера . Можно конечно задать в абсолютных значениях километровые размеры, но зачем, если весь контент на правильно свёрстанных сайтах выводится в те размеры, которые занимает , а то, что не попадает в эти размеры, обычно находится вне зоны видимости и не видно пользователю?
- Свойство background-color: rgba(136, 136, 204, 0.5); — требуется задать, если нужно перекрыть пользователю просмотр (тогда прозрачность должна быть либо вообще не задана, либо равняться 1 ). Если это свойство не задать, div будет прозрачным: всё будет видно, но скопировать что-либо со страницы будет невозможно без вмешательства с помощью инструментов разработчика браузера (которые включаются в два клика, и одной кнопкой удаляют этот div — это к тому, что так защищают контент только от совсем ничего не умеющих и ничего не знающих пользователей, которые вряд ли что-то будут копировать и тиражировать с сайта).
- Свойство z-index: 4444; — это для того, чтобы поднять div над всеми слоями. Если что-то будет всё-равно торчать, просто нужно посмотреть z-index торчащего элемента и выставить ещё больший z-index для нашего div .
Выводы:
Так можно просто и быстро создать перекрывающий всю страницу div , который надёжно спрячет контент во исполнение законов, но вряд ли защитит от тех, кто ворует контент. Всё, что опубликовано в интернете и отображается в браузере, можно с теми или иными усилиями утащить, уж поверьте. И чем сложнее навороты, тем сложнее обслуживать сайт, так что борьба с воровством контента в плане его защиты от копирования, — заранее проигрышная тема.
Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! 😉
Как растянуть div-блок на всю ширину страницы?
Проблема в том, что через комп див блок растягивается правильно, во всю ширину страницы, а через планшет или телефон див растягивается до границы экрана, а при прокрутке вправо или уменьшении масштаба там и остаётся. Скрин в самом низу с примером меньшенного масштаба. Блок отмечен красной стрелкой. Что пробовал и не помогало:
body < width: 100%; height: 100%; >.div
Отслеживать
11 1 1 золотой знак 2 2 серебряных знака 8 8 бронзовых знаков
задан 14 сен 2014 в 14:26
Rammsteinik Rammsteinik
1,182 4 4 золотых знака 19 19 серебряных знаков 48 48 бронзовых знаков
А если вместо min-width — width: 100%;
14 сен 2014 в 14:51
14 сен 2014 в 15:02
что то явно мешает, надо смотреть код и стили. Если нет, то можно попробовать так .div < position: absolute; width: 100% >Только контент нужно будет отодвинуть на высоту этого блока вниз.
14 сен 2014 в 15:14
Абсолют не подходит. При полном экране всё нормально, как браузер уменьшаю, при прокрутке вправо блок остаётся на месте.
14 сен 2014 в 15:33
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Так происходит, когда блоки сайта не помещаются в ширину экрана и остаются за его границами. Одно из следствий — появляется горизонтальный скролл. При этом те блоки, ширина которых была задана как width: 100% — остаются с такой шириной. В итоге вы скроллите вправо, и видите пустую область.
Решить это быстро можно вот так:
body
Этим вы зададите для страницы минимальную ширину, в которую все ваши блоки гарантированно впишутся. И даже если ширина экрана будет недостаточной для отображения всех блоков, и появится горизонтальный скролл — блоки с width: 100% будут отображаться во всю указанную ширину 1000px .
Плюс, полезно бывает задать эту же величину в мета-теге в head :
Таким образом, заходя с мобильного, вы будете видеть всю страницу целиком, максимально «отзумленную».
CSS width 100%. Блок, который занимает всю ширину веб-страницы.
В современной верстке, на веб-страницах часто можно встретить блоки, которые занимают 100% ширины страницы.
Это выглядит вот так:
Давайте разберемся, каким образом можно добиться такого эффекта.
Для примера, давайте рассмотрим следующую ситуацию.
Блок, который должен занимать 100% ширины.
Смотрим на результат, который получился.
Больше моих уроков по HTML, CSS и верстке сайтов здесь.
В целом хорошо, но по бокам блока видны небольшие отступы, которые портят всю картину. Хотелось бы их убрать.
Первое, что приходит на ум, это присвоить блоку свойство width:100%. Но, это никак не изменит ситуацию. Можете сами в этом убедиться.
Блок, который должен занимать 100% ширины.
Поэтому свойство width:100% можете смело убирать.
В чем же реальная причина таких отступов?
Дело в том, что блок div, ширину которого мы хотим сделать 100% хранится в двух родительских элементах body и html. По умолчанию, браузеры задают им определенные значения для свойств padding и margin.
Для того, чтобы решить проблему, нужно всего-лишь обнулить эти отступы. Сделать это очень просто:
html, body
Смотрим, как выглядит блок теперь.
Все отлично, пространство, которое было по бокам, было убрано.
Больше моих уроков по HTML, CSS и верстке сайтов здесь.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через: