Как растянуть блок на всю ширину экрана css

Как заверстать блок во всю ширину окна внутри блока с произвольной шириной

Пока переделывал блог, захотелось, чтобы посреди поста можно было ворваться с каким-нибудь блоком во всю ширину окна. Например, вот так:

Ширина основной колонки с контентом при этом абсолютно произвольная и может меняться в зависимости от размеров окна, настроения браузера и фазы луны. Единственное, что про нее достоверно известно — она выровнена по центру:

Самый очевидный способ — прервать блок с контентом, сделать блок без маржинов, затем продолжить контент:

Проблема в том, что посты удобно писать маркдауном, а в маркдауне от такого способа получается адская каша, за которой сложно следить:

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 , в котором он располагается):

    .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 и верстке сайтов здесь.

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через: