Как сделать блок на всю ширину страницы внутри блока по середине?
Добрый день, подскажите пожалуйста, есть блок, который находится по середине экрана шириной, допустим 1000px. В нём находятся блоки с контентом. Один из блоков контента нужно сделать, чтобы он был не 1000px шириной, а 100% от ширины экрана. Как это можно реализовать? Желательно без absolute.
- Вопрос задан более трёх лет назад
- 951 просмотр
3 комментария
Оценить 3 комментария
Ярослав Иванов @space2pacman Куратор тега CSS
Какую-то дичь мутите.
Сергей delphinpro @delphinpro Куратор тега CSS
Фигней не страдайте.
Ambal89 @Ambal89 Автор вопроса
Ярослав Иванов: Да, у сайта уже просто есть структура, хотел узнать, можно ли сделать задуманное, не меняя её.
Решения вопроса 0
Ответы на вопрос 2
Архитектор (обычный, который строит)
width: 100vw;
Ответ написан более трёх лет назад
Нравится 2 3 комментария
Ambal89 @Ambal89 Автор вопроса
Спасибо, но вроде это решение не кроссбраузерное?
Сергей delphinpro @delphinpro Куратор тега CSS
100vw не учитывает полосу прокрутки (наверное это баг) => будет горизонтальная прокрутка.
Если контента мало, то ок — https://jsfiddle.net/q92wa8kk/1/
Если длина страницы больше одного экрана, будет косяк — https://jsfiddle.net/q92wa8kk
Лучше разорвать контейнер. Это абсолютно понятно и предсказуемо. Т.е. делать несколько контейнеров на странице
width
Свойство width отвечает за ширину элемента. С его помощью мы можем увеличивать или уменьшать ширину строчно-блочных ( inline — block ) и блочных ( block ) элементов. На строчные элементы это свойство не будет иметь никакого влияния.
Строчно-блочные ( inline — block ) элементы по умолчанию подстраиваются под ширину контента, лежащего у них внутри.
Блочные ( block ) элементы по умолчанию имеют ширину 100%. Если представить сайт как документ с текстом, то блочный элемент займёт всю строку, на которой стоит.
Кроме фиксированной ширины можно задавать элементу минимальную ширину min — width или максимальную ширину max — width .
В современном CSS есть логический аналог этого свойства — inline — size .
Пример
Скопировать ссылку «Пример» Скопировано
div class="block">Я — блочный элемент!div> div class="inline-block">Яdiv> div class="inline-block">строчно-блочныйdiv> div class="inline-block">элемент!div>
Не меняем display для .block , поскольку уже является блочным:
.block background-color: #2E9AFF;> .inline-block display: inline-block; background-color: #F498AD;>.block background-color: #2E9AFF; > .inline-block display: inline-block; background-color: #F498AD; >
Теперь любой текст будет занимать не больше, чем 50% от ширины карточки ��
Как увеличить или уменьшить ширину блока сайта, созданного на Тильде
Стандартная ширина контентной части сайта, созданного на Тильде в десктопной версии составляет 1200 пикселей.
Как же нам быть, если наш дизайн предусматривает другие размеры?
Если по дизайну наш блок должен быть меньше, сделать его таким не составит труда, используя Zero блок и располагая в нем элементы так, как нам это необходимо. Если же необходимо уменьшить ширину блока с помощью кода, то делать это можно аналогично тому, как ниже в примере мы будем делать блок шире.
Как увеличить ширину блока в Тильде? Можно ли?
Да. Можно. Используя пользовательский код CSS, мы можем влиять на ширину отдельных блоков Тильды — как стандартных, так и Zero блоков.
Разберем на конкретном примере.
Добавим на страницу, например, блок AB201.
Видим, что контент блока расположен по центру экрана и занимает определенное место в нем.
С помощью инструментов разработчика (F12 в Яндекс-браузере, например) исследуем макет сайта и конкретно нашего блока.
Выясняем, что контент заключен в блоке
класс которого t-container,имеет ограничение ширины, равное 1200 пикселей, о котором упоминалось выше в посте.
Так вот, этот параметр мы с Вами изменим, например, на 1400 пикселей, тем самым увеличив ширину нашего блока на 200 пикселей.
Добавим на нашу страницу в Тильде блок из категории Другое — Т123 «HTML код».
И во вкладке Контент этого блока напишем следующее:
где #rec338186146 — это id нашего блока. Этот параметр Вы можете найти на вкладке Настройки необходимого блока (в самом низу).
Опубликуем страницу после внесенных изменений, увидим, что блок стал шире:
Однако, также заметим, что контент в этом блоке стал располагаться не по центру.
Исправим это следующими манипуляциями:
Во-первых, в Настройках блока, для параметра Отступ слева укажем Без отступа.
Получим:
Как видим из разметки в инструментах разработчика, заголовок блока и описание располагаются в div блоке
Очевидно, чтобы центрировать эти элементы, нам необходимо переопределить стили класса:t-col_8, но конкретно для нашего блока с указанием его id (на сайте, вероятно, будут присутствовать другие элементы с этим классом. Если мы не укажем id блока, то стили будут переопределены для всех элементов с классом t-col_8).
Итак, напишем в добавленный ранее блок с HTML кодом следующие строчки:
#rec338186146 .t-col_8 display: block;
float: none;
margin: 0 auto;
>
После сохранения внесенных изменений и публикации страницы увидим, что заголовок и описание блока теперь располагаются по центру:
Центрируем галерею изображений блока.
Также используя инструменты разработчика в браузере, видим, что контент с изображениями располагается в блоке div
Переопределять стили будем для класса:t-row. А точнее, не переопределять, а дописывать необходимые для решения нашей задачи.
В блок с HTML-кодом допишем строчки:
#rec338186146 .t-row display: flex;
justify-content: center;
>
Опубликуем страницу после внесенных изменений, увидим требуемый результат — ширина блока 1400 пикселей, контент располагается по центру:
Таким образом, мы научились увеличивать ширину блока в Тильде, используя пользовательский код.
Надо отметить, что пользовательский код доступен только на платных тарифах Тильды.
Пример был рассмотрен на отдельном несложном блоке. Аналогично Вы можете использовать этот прием и для других видов блоков. Однако, как видите, недостаточно изменить лишь одну ширину блока, так как вслед за этим на странице «поедут» другие элементы блока. Так что для них тоже необходимо будет вносить свои правки. Какие именно, все зависит от ситуации, которые бывают весьма различны. Очевидно, Вы должны обладать знаниями и навыками работы с инструментами разработчика браузера и знать основы HTML и CSS, чтобы понимать, какие именно нужно вносить изменения, чтобы влиять на элементы сайта.
Надеюсь, статья была Вам полезна и помогла в реализации Ваших задач.
Спасибо, что дочитали до конца!
Желаю Вам удачи!
Простое растяжение на всю ширину экрана с помощью *:not()
От автора: например, вы делаете макет для поста в блог. Вы написали контент в CMS через WYSIWYG-редактор и вывели его на страницу. Потом вы открываете страницу на мобильном устройстве и видите, что параграфы растянуты на всю ширину. Слегка неудобно. Вы добавляете padding слева и справа, например, с помощью div.container.
Это будет работать ровно до тех пор, пока клиенту не захочется растянуть изображения и видео на всю ширину. Теперь ваш универсальный способ с padding не работает. У вас есть несколько вариантов:
Разделить $post->content на отдельные части в CMS. Если выбрать этот способ, нужно будет написать front-end и back-end логику для рендеринга всех частей контента (части в контейнере и без). Этот способ дольше обслуживать. Вы разбили контент в базе данных только лишь для визуальной стилизации, что нельзя назвать хорошим разделением задач.
Можно обойтись без контейнера. Однако придется явно прописать padding для всех дочерних элементов кроме изображений. Если пойти этим путем, то CSS будет примерно следующим:
/* Repeat for every block level element in the HTML */
margin — left : auto ;
margin — right : auto ;
max — width : 50rem ;
padding — left : 5 % ;
padding — right : 5 % ;
Это сработает, но всегда будет что-то, что вы не учли. Одни изображения будут растягиваться на всю ширину, другие – нет. Все iframe’ы или только YouTube и Vimeo? Вы управляете и вхождениями и исключениями из правила. Несколько запросов с клиента, и ваш CSS код стал просто огромным.
Давайте попробуем *:not()
Я ленивый, поэтому подумал, как написать весь этот CSS код намного проще. И я нашел простое и элегантное решение с помощью селектора :not() из спецификации CSS Level 3.
. post > * : not ( img ) : not ( video ) < margin - left : auto ; margin - right : auto ; max - width : 50rem ; padding - left : 5 % ; padding - right : 5 % ;
Теперь я управляю только исключениями. Этот трюк я использую в своем блоге, чтобы вырваться из скучной, но надежной «трубы контента». Способ можно перевести на множество элементов:
. post > * : not ( img ) : not ( video ) : not ( table ) : not ( iframe [ src* = «codepen» ] ) < /* . */ >
Я просто добавляю те элементы в список, которые необходимо выдернуть из контейнера и увеличить. Способ на :not() довольно универсальный.
Цветные фоновые уровни
Эту технику можно перенести на теги section и div, чтобы задавать им разные цветные фоны (как на маркетинговых сайтах), после чего они перерабатываются таким образом, что этот div получает стили поддельного контейнера.
. post > * : not ( . colored — bg ) ,
. colored — bg > * <
margin - left : auto ;
margin - right : auto ;
max - width : 50rem ;
padding - left : 5 % ;
padding - right : 5 % ;
. colored - bg <
background : lightgray ;
padding - top : 5 % ;
padding - bottom : 5 % ;
Демо: макет поста в блоге
Чтобы проверить теорию, я создал стандартный макет поста в блог, в котором примерно 70 строк CSS. Мне этого вполне достаточно.
Мне нравится, к чему все идет
Буду честен, у способа есть некоторые ограничения. Выбор с помощью селектора * — довольно дорогое удовольствие, если страница огромная. Вы пишите селекторы слева направо, но CSS оценивает их справа налево. Перезаписать селектор :not() довольно сложно (см. blockquote в демо). Вычисления при изменении размеров могут также дорого обойтись браузерам.
Наверное, я буду пользоваться этим методом. Мне нравится, что я не открываю и не закрываю контейнеры. Мне нравится, что я могу писать код прямо. Мне нравится, что это относительно дешёвый и легкий способ вырваться за пределы скучной трубы контента, даже если это мало что меняет.
Сейчас я работаю над парой проектов, где блоки-обертки div реально вносят путаницу и делают код менее гибким. Мы с Chris Coyier даже обсуждали этот вопрос в последнем выпуске подкаста rapidfire на Shop Talk Show . Похоже, это отличный способ.
Источник: //daverupert.com/
Редакция: Команда webformyself.