Как развернуть блок css

Блок на весь экран | CSS

If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as ‘0’ (for ‘min-height’) or ‘none’ (for ‘max-height’). [w3.org]

html, body < height: 100%; margin: 0; padding: 0; overflow: hidden; >body < overflow: auto; /* добавить полосу прокрутки */ > main

Блок шириной на весь экран монитора выровнять по центру окна браузера

У многих сайтов, в том числе у «Шпаргалки блоггера» содержание ограничено определённой шириной и горизонтально выравнивается по середине экрана.

header, nav, main, footer

Для того, чтобы контент выходил за пределы этих 1200px , но был ограничен шириной окна браузера, достаточно такого кода:

Картинка на весь экран CSS

Особенно здорово смотрятся изображения. Они занимают необходимое им пространство, но не более ширины окна браузера.

Код немного доработан, опираясь на статью «Размер изображения меняется при изменении экрана браузера». Там же написан соответствующий вариант для видео.

7 комментариев:

Agent_Smith Полезная штука, спасибо Вам) NMitra Для себя делала :)) Другие прописывают max-width для каждого отдельного тега (p, pre и т.п.), а не для всей колонки main. Анонимный С высотой блока не работает. просто по ширине экрана, ниже обрезается и никуда не скролится NMitra Ничего не поняла 🙂 Приведите пример, пожалуйста. Анонимный о Иван Сафронов не работает данный метод NMitra Так не может быть: на данной странице ведь работает. Покажите URL, где внедрён код и поясните что именно хотите сделать. Например, блок с заголовком «Популярное».

Как сделать сворачивающиеся / разворачивающиеся записи (FAQ) + кнопка «Посмотреть все»

Задача: создать набор блоков, у которых видны заголовки, а тело скрыто.
При клике по заголовку тело плавно разворачивается, и значок «развернуть» поворачивается на 180 градусов.

Когда щелкают по «Смотреть все», разворачиваются только (важно!) те блоки, которые были свернуты.
Надпись «Смотреть все» меняется на «Свернуть все». Список в свернутом виде: Список с одним развернутым блоком: Изображение стрелочки (можно скачать этот png-файл): HTML Для того, чтобы сделать основу, нужно добавить разметку в файл *.tpl:

 
 
 
 
Заголовок блока 1
 
 
Текст внутри блока 1
 
 
 
 
Заголовок блока 2
 
 
Текст внутри блока 2
 
 
 
 
Заголовок блока 3
 
 
Текст внутри блока 3
 
 
 
 
Смотреть все
 
 
 
 

CSS Для стилизации в CSS добавляем следующий код:
.faq_list < position: relative; color: #192430; >.faq_item < box-sizing: border-box; border-left: 8px solid #a2adb6; padding: 10px 0 10px 15px; >.faq_item_title < box-sizing: border-box; font-size: 20px; text-transform: uppercase; position: relative; >.faq_show_all .faq_item_title < font-weight: 900; padding-left: 23px; margin-top: 20px; >.faq_item_title_inner < display: inline-block; position: relative; padding: 0 60px 0 0; cursor: pointer; >.faq_item_title_inner:hover:before < transform: translateY(1px); >.faq_item_title_inner:before < position: absolute; content: ''; right: 0; top: 0; width: 30px; height: 100%; background: url(../images/faq_arrow_down.png) no-repeat center center; cursor: pointer; transition: .2s; transition-timing-function: ease-in-out; >.faq_item_title_inner.open:before < transform: rotate(180deg); >.faq_item_body

JavaScript Также пишем скрипт, который отвечает за логику работы «выпадашек» и за анимацию и добавляем этот код в главный файл *.js (обычно это main.js).
Место для вставки кода — внутри фигурных скобок у функции вида: $(document).ready(function()<>); или
$(function()<>);

$('.faq_item_title_inner').on('click',function() < $(this).parents('.faq_item').find('.faq_item_body').slideToggle(300); $(this).toggleClass('open'); if ($(this).hasClass('show_all'))< if ($(this).hasClass('open')) < $(this).html('Свернуть все'); $('.faq_item_title_inner:not(.open)').trigger('click'); >else < $(this).html('Смотреть все'); $('.faq_item_title_inner.open').trigger('click'); >> >);

Пример реализации сворачивающихся / разворачивающихся записей (FAQ) на SimplaCMS можно посмотреть на сайте migis.org, который мы делали.

Способы смены порядка вывода элементов с помощью CSS

В этой статье мы рассмотрим несколько различных методов CSS для переупорядочения вывода элементов HTML.

Цель

Наша раскладка очень простая. В частности, на маленьких экранах (меньше 600px) она будет выглядеть так:

На средних экранах и больше (от 600px) кнопки будут выстраиваться в ряд:

Наша главная задача — поменять порядок кнопок на обратный.

Разметка

Разметка будет самая простая: просто элемент div , содержащий четыре кнопки:

 
Button 1 Button 2 Button 3 Button 4 
 

Стили

На маленьком экране у всех кнопок будут одинаковые стили:

.boxes button < display: block; width: 100%; padding: 15px; border: none; margin-bottom: 5px; box-sizing: border-box; font-size: 1rem; text-align: center; text-decoration: none; background: gold; color: #000; >.boxes button:nth-of-type(even)

На больших экранах мы зададим width: 25% , остальные стили будут определяться методом CSS, который мы будем применять для задания обратного порядка кнопок.

@media screen and (min-width: 600px) < /* we skip this property in flexbox and grid methods */ width: 25%; /* more stuff here */ >

Наконец, у нас будут стили для состояния focus наших кнопок:

.boxes button:focus

Таким образом, если мы будем использовать для навигации клавишу Tab, наши кнопки при фокусировке станут темно-красными.

Методы упорядочивания колонок

Теперь мы готовы проверить различные подходы CSS для вывода кнопок в реверсивном порядке при превышении областью видимости ширины в 599px.

Метод №1: плавающие блоки

Можно просто добавить блокам float: right , вот полные стили:

@media screen and (min-width: 600px) < .boxes button < float: right; width: 25%; >> 

И демо с Codepen:

Метод №2: позиционирование

Альтернативным вариантом будет задание позиции элементам, относительной или абсолютной.

По первому варианту (с относительным позиционированием) мы зададим кнопкам, плывущим влево свойство position: relative и затем расставим их с помощью свойство left .

@media screen and (min-width: 600px) < .boxes button < position: relative; float: left; width: 25%; >.boxes button:nth-of-type(1) < left: 75%; >.boxes button:nth-of-type(2) < left: 25%; >.boxes button:nth-of-type(3) < left: -25%; >.boxes button:nth-of-type(4) < left: -75%; >> 

Вторым вариантом (с использованием абсолютного позиционирования) мы зададим нашим кнопкам position: absolute , а с помощью свойства left разместим их более точно.

@media screen and (min-width: 600px) < .boxes < position: relative; >.boxes button < position: absolute; width: 25%; >.boxes button:nth-of-type(1) < left: 75%; >.boxes button:nth-of-type(2) < left: 50%; >.boxes button:nth-of-type(3) < left: 25%; >.boxes button:nth-of-type(4) < left: 0; >> 

Демо на Codepen:

Метод №3: свойство direction

Менее очевиден подход на основе свойства direction — оно предназначено для смены направления чтения текста. В нашем случае мы задаем direction: rtl (справа налево) для элемента-обертки, что позволит сменить направление раскладки.

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

Вы можете видеть необходимые стили CSS ниже:

@media screen and (min-width: 600px) < .boxes < display: table; width: 100%; direction: rtl; >.boxes button < display: table-cell; width: 25%; >> 

Стоит упомянуть, что если по каким-то причинам мы хотим также изменить направление текста в кнопках, мы можем включить специальное правило для того, чтобы направление символов юникода определялось свойством direction .

.boxes button

Демо на Codepen:

Метод №4: трансформация

Изящным решением будет оставить кнопкам float: left; и затем применить transform: scaleX(-1) к ним и их родителю. Задав отрицательные значения мы сделаем так, что трансформируемый элемент не масштабируется, а переворачивается по горизонтальной оси.

@media screen and (min-width: 600px) < .boxes < transform: scaleX(-1); >.boxes button < float: left; transform: scaleX(-1); width: 25%; >> 

Демо на Codepen:

Мы также можем использовать для создания нужного порядка функцию трансформации rotate . Все, что нам надо добавить кнопкам и их родителю свойство transform: rotateY(180deg) .

CSS для этого решения:

@media screen and (min-width: 600px) < .boxes < transform: rotateY(180deg); >.boxes button < float: left; transform: rotateY(180deg); width: 25%; >> 

Демо на Codepen:

Метод №5: флексбокс

Флексбокс это еще один способ изменения порядка колонок. В нашем примере мы используем два разных свойства флексбокса для создания нашей раскладки.

Первый подход это сделать родительский элемент кнопок флекс-контейнером и затем добавить flex-direction: row-reverse , вот так:

@media screen and (min-width: 600px) < .boxes < display: flex; flex-direction: row-reverse; >> 

Демо на Codepen:

Второй вариант с флексбоксом состоит в использовании свойства order для определения порядка, в котором кнопки должны выводиться.

@media screen and (min-width: 600px) < .boxes < display: flex; >.boxes button:nth-of-type(1) < order: 4; >.boxes button:nth-of-type(2) < order: 3; >.boxes button:nth-of-type(3) < order: 2; >.boxes button:nth-of-type(4) < order: 1; >> 

Демо на Codepen:

Метод №6: грид-раскладка

Многообещающим решением для расстановки элементов является раскладка на основе CSS Grid. Несмотря на крайне ограниченную поддержку в браузерах на момент написания статьи ее стоит попробовать. Учитывайте, что наш пример будет работать только в Chrome (по умолчанию эта возможность отключена, но ее легко активировать).

Не погружаясь глубоко в детали я опишу два способа с использованием CSS Grid.

Первый вариант это задание родительскому элементу кнопок свойства display: grid; и использование свойства grid-column для определения порядка вывода кнопок. В дополнение мы обеспечим попадание всех кнопок в один ряд путем прямого указания этого — grid-row: 1 .

@media screen and (min-width: 600px) < .boxes < display: grid; grid-template-columns: repeat(4, 1fr); >.boxes button < grid-row: 1; >.boxes button:nth-of-type(1) < grid-column: 4; >.boxes button:nth-of-type(2) < grid-column: 3; >.boxes button:nth-of-type(3) < grid-column: 2; >.boxes button:nth-of-type(4) < grid-column: 1; >> 

Демо на Codepen:

Второй вариант использования CSS Grid похож на второй способ использования флексбокса. Мы зададим контейнеру свойство display: grid; , а затем используем свойство order для определения порядка вывода кнопок.

@media screen and (min-width: 600px) < .boxes < display: grid; grid-template-columns: repeat(4, 1fr); >.boxes button:nth-of-type(1) < order: 4; >.boxes button:nth-of-type(2) < order: 3; >.boxes button:nth-of-type(3) < order: 2; >.boxes button:nth-of-type(4) < order: 1; >> 

Демо на Codepen:

Напомню, что для тестирования этого метода, вам надо активировать “Experimental Web Platform features” в Chrome.

Порядок исходников и визуальный порядок

Как было показано, мы можем использовать различные подходы CSS для смены порядка наших кнопок. Попробуем пройтись по нашим демо, используя клавиатуру (кликните на пен и нажмите клавишу Tab) для навигации по кнопкам. Вы заметите, что даже, если кнопка с номером 4 выведена первой, фокус сначала появляется на кнопке с номером 1, так как она расположена первой в DOM. То же случится, если мы протестируем наши демо со скринридером (я проводил тесты с NVDA).

Учитывая эту независимость порядка CSS от порядка DOM, нам надо быть крайне осторожными с частями страниц, порядок которых мы изменяем с помощью CSS. Например, свойство флексбокса order это один из наиболее гибких способов для переупорядочения элементов, согласно спецификации:

Авторы должны использовать order только для визуального, а не логического переупорядочивания контента. Попытка использовать order для логического порядка не сработает.

То же самое спецификация говорит о свойстве order CSS Grid.

Также как и с переупорядочиванием флекс-элементов, свойство order может использоваться только, когда визуальный порядок надо рассинхронизировать с порядком зачитывания и навигации — иначе надо менять исходники документа.

Примечание: если вы используете второй способ с флексбоксом в Firefox, то вы заметите, что навигация с клавиатуры работает отлично и фокус на средних экранах появляется сначала на кнопке №4. Такое поведение является багом.

Заключение

В этой статье мы проверили различные методы CSS для переупорядочивания элементов HTML. Конечно, не все из этих методов универсальны и перед тем, как выбрать нужный вам, вы должны учесть несколько вещей:

• Браузеры, которые вам надо поддерживать. Некоторые из перечисленных подходов не работают в старых версиях Internet Explorer (т.е. < 10).
• Степень сложности перестановки — это может быть что-то простое, как наш пример или что-то более сложное.

Дополнительные материалы

• HTML Source Order vs CSS Display Order от Adrian Roselli
• Flexbox & the keyboard navigation disconnect от Léonie Watson

apt.ru

Timeweb — компания, которая размещает проекты клиентов в Интернете, регистрирует адреса сайтов и предоставляет аренду виртуальных и физических серверов. Разместите свой сайт в Сети — расскажите миру о себе!

Виртуальный хостинг

Быстрая загрузка вашего сайта, бесплатное доменное имя, SSL-сертификат и почта. Первоклассная круглосуточная поддержка.

от 196 руб руб. / мес

Аренда VDS и VPS

Виртуальные серверы с почасовой оплатой. Меняйте конфигурацию сервера в любой момент и в пару кликов.