Как растянуть элемент на весь экран css

Как растянуть элемент на весь экран css

Сообщения: 26
Благодарности: 0

Вчера весь рабочий день просидел в гугле, но так и не смог найти ответа на вопрос: «Как в css растянуть блок по вертикали?». Точнее, ответы есть, но они на элементарные случай, когда блок растягивается на 100% высоты своего родителя. Но этот и подобные способы не работают, если перед моим блоком стоит другой блок, и мне нужно, соответственно, заполнить растягиваемым блоком все пространство от его текущего положения до конца экрана. Причем мне нужно именно растянуть блок точно до правого нижнего угла, а не «обрезать» родительским блоком все, вылезло за его размеры.

Постараюсь объяснить зачем мне это нужно на простом примере: http://jsfiddle.net/ongpj2vz/

В этом примере div.header имеет изменяемую высоту, а декоративные разделители (div.separator_xxx) должны всегда начинаться строго в 50пикселях от нижней границы div.header и в заканиваться в 50 пикселях от нижней границы экрана.

В примере я искусственно выровнял их снизу, зная точный размер заголовка. но стоит мне расширить/сузить высоту заголовка, и мое позиционирование «полетит», т.к. я не знаю правильных координат нижней границы div.work_area.

Прошу помочь с решением. т.к. мозг уже кипит. Важно! — интересует решение на чистом CSS, без скриптов ( которые по дефолту выключены, наверное, в половине браузеров)

Сообщения: 3651
Благодарности: 1498

suvolod,
Цитата suvolod:

интересует решение на чистом CSS, без скриптов»

Если вас устроит поддержка flexbox браузерами, то вот: JsFiddle. Правда странное решение делать одну половину координат позиционирования в абсолютных значениях, а вторую — в относительных
Пример: Если заданы размеры родительского элемента (с классом parent) и первый дочерний элемент не покрывает их полностью — второй с классом growing-child займет всё доступное место.

.parent < display: flex; flex-direction: column; /* порядок элементов */ /* height, width */ >.growing-child

HTML код:

"parent"> Child #1 
"growing-child">Child #2 

P.S.: Здесь — неплохая ознакомительная справка по flexbox’ам, правда, на английском.

——-
Рекомендую: $25 на тест виртуального сервера (VPS) за регистрацию по ссылке

Последний раз редактировалось Habetdin, 23-12-2014 в 23:35 . Причина: P.S.

Высота

Используйте h- или h-px , чтобы установить элемент на фиксированную высоту.

div class="h-96 . ">h-96div> div class="h-80 . ">h-80div> div class="h-64 . ">h-64div> div class="h-48 . ">h-48div> div class="h-40 . ">h-40div> div class="h-32 . ">h-32div> div class="h-24 . ">h-24div>

Полная высота

Используйте h-full , чтобы установить высоту элемента равной 100% от его родительского элемента, если родительский элемент имеет определенную высоту.

div class="h-48"> div class="h-full . "> div> div>

Высота области просмотра

Используйте h-screen , чтобы элемент занимал всю высоту области просмотра.

div class="h-screen"> div>

Применяя условно

Наведение, фокус и другие состояния

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover : h-full , чтобы применять утилиту h-full только при hover .

div class="h-8 hover:h-full"> div> 

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

Контрольные точки и медиа-запросы

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md: h-full , чтобы применить утилиту h-full только на экранах среднего размера и выше.

div class="h-8 md:h-full"> div> 

Использование пользовательских значений

Настройка вашей темы

По умолчанию шкала высоты Tailwind представляет собой комбинацию шкалы интервалов по умолчанию, а также некоторых дополнительных значений, специфичных для высот.

Вы можете настроить масштаб интервалов, отредактировав theme.spacing или theme.extend.spacing в вашем файле tailwind.config.js .

tailwind.config.js

module.exports =   theme:   extend:   spacing:   '128': '32rem',  >  >  >  > 

Чтобы настроить высоту отдельно, используйте раздел theme.height Вашего файла tailwind.config.js .

tailwind.config.js

module.exports =   theme:   extend:   height:   '128': '32rem',  >  >  >  > 

Дополнительные сведения о настройке темы по умолчанию смотрите в документации настройка темы.

Произвольные значения

Если вам нужно использовать одноразовое height value , которое не имеет смысла включать в вашу тему, используйте квадратные скобки, чтобы сгенерировать свойство на лету, используя любое произвольное значение.

div class="h-[32rem]"> div> 

Узнайте больше о поддержке произвольных значений в документации по произвольным значениям.

Copyright © 2023 Tailwind Labs Inc.