Как сделать адаптивную высоту блока css

Адаптивный квадрат на CSS

Как вычисляется padding , если он указан в процентах? Очень просто:

При указании padding в процентах, значение считается от ширины родителя элемента.

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

создаем блок, который хотим сделать квадратным
помещаем внутрь элемент ( :after )
делаем элемент блочным
задаем элементу padding-top: 100%

Псевдоэлемент используется, чтобы не создавать лишний html элемент.

А как поместить контент?

Все сломается, если поместить в блок .square контент, например, текст. Наш квадрат превратится в прямоугольник. Эта проблема тоже решается очень просто.

Снова по порядку:

Задаем position: relative; для нашего квадратного блока
Весь контент оборачиваем в html-блок .content
Позиционируем .content абсолютно
Растягиваем .content на всю ширину и высоту блока .square

Так как .content спозиционирован абсолютно — контент, находящийся внутри не будет растягивать квадрат.

how do I give a div a responsive height

I’m stating to learn responsive design, but there’s one thing I can’t seem to figure out, so far.

I’d like the div element (contactBg) with text inside of it to come down to the bottom of the image to the left. Obviously I can do that by defining the height in px, but then that height is maintained when the rest of the window resizes instead of being fluid.

If there are any good articles out there you may know of that explains how to do this, that would be very helpful, thanks!

Here’s the mark up:

And here’s the css:

3 Answers 3

I know this is a little late to the party but you could use viewport units

Viewport units: vw, vh, vmin, vmax — CR Length units representing 1% of the viewport size for viewport width (vw), height (vh), the smaller of the two (vmin), or the larger of the two (vmax).

For the height of a div to be responsive, it must be inside a parent element with a defined height to derive it’s relative height from.

If you set the height of the container holding the image and text box on the right, you can subsequently set the heights of its two children to be something like 75% and 25%.

However, this will get a bit tricky when the site layout gets narrower and things will get wonky. Try setting the padding on .contentBg to something like 5.5%.

My suggestion is to use Media Queries to tweak the padding at different screen sizes, then bump everything into a single column when appropriate.

Адаптивный дизайн высоты

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

Вы понимаете, о чем я? Реальность такова, что не все юзеры используют свои веб-браузеры так, как мы ожидаем. Я видел сайты, которые плохо выглядят, когда уменьшается высота браузера.

DevTools

Изменение размера браузера (по вертикали) — это не единственный способ изменить высоту области просмотра. Когда вы открываете DevTools, инструменты занимают пространство в высоту браузера.

Это может нарушить дизайн или обнаружить неучтенные проблемы. Область со стрелкой на рисунке выше представляет текущую высоту области просмотра. При небольшом экране ноутбука видно только небольшую часть веб-страницы. Ключевой вопрос вот в чем: возможно ли улучшить впечатления пользователя при малой высоте области просмотра? Да, это возможно. Хватит теории, пора учиться вертикальному мышлению в CSS.

Вертикальное мышление в CSS

Как дизайнеры и разработчики, некоторые из нас сосредотачиваются только на вариациях ширины, не придавая значения тестированию высоты. Например, при работе над дизайном страницы вы указали, как конкретный компонент выглядит при разной ширине области просмотра. Но как насчет разных высот?

На рисунке выше изображено настраиваемое в зависимости от высоты области просмотра навигационное меню. Навигационные элементы отображаются так, чтобы заполнять весь экран. Когда размер меньше, шрифт и интервал уменьшаются. Если размер области просмотра невелик (например, как у iPhone 5), навигационные элементы будут отображаться в виде сетки из двух столбцов. Разработчик и дизайнеры часто либо не учитывают это, либо забывают, либо делают только тогда, когда кто-то сообщает об ошибке в своем веб-браузере. CSS помогает в применении вышесказанного в основном через два метода:

вертикальные медиазапросы,
единицы измерения области просмотра.

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

Как вы уже знаете, можно применять медиазапросы для установки ширины:

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

Единицы измерения области просмотра

Использование единиц измерения области просмотра поможет обеспечить лучшее впечатление при использовании. Например, управление вертикальным расстоянием между элементами на основе высоты области просмотра.

Это все забавы и игры, пока мы не рассмотрим приведенный выше пример на большом дисплее, например iMac 27”. Высота области просмотра будет слишком большой. К счастью, у нас есть два способа ограничить margin-bottom от слишком большого размера:

медиазапросы,
функции сравнения в CSS.

Другой способ — применение функции сравнения CSS clamp() . В сущности нам нужно установить минимальный отступ в 10px , а максимальный в 50px . Промежуточное значение вычисляется в браузере!

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

Примеры и варианты применения

Перекрывающийся контент

В этом примере есть секция hero с заголовком и иллюстрацией. Высота секции составляет 100vh , что равно 100% высоты области просмотра.

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

Обратите внимание, как иллюстрация накладывается на раздел под ней. Так происходит потому, что вертикального пространства для этого достаточно. Давайте посмотрим на HTML и CSS.

Вот возможное решение проблем такого рода:

Установите иллюстрации фиксированные ширину и высоту, а не только ширину. Отсутствие высоты сохранит проблему.
Применяйте height: 100vh только тогда, когда высота области просмотра больше 700px (значение медиазапроса может отличаться в зависимости от контекста).

Хорошо, мы договорились, что лучше использовать вертикальный медиазапрос. Однако применение 100vh рискованно, потому что даже если вы ограничите размер иллюстрации — не сможете сделать то же самое для текстового содержимого. Если текстовое содержимое стало длиннее, та же проблема повторится снова. Смотрите рисунок ниже:

Чтобы исправить это, используем min-height вместо height . Таким образом, если содержимое стало длиннее, высота станет расширяться и не будет никакого перекрытия.

Фиксированный заголовок

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

Вот сайт в режиме альбомной ориентации. Обратите внимание, что заголовок занимает слишком много вертикального пространства. Действительно ли это важно для пользователя? В большинстве случаев ответ — нет. Мы можем улучшить ситуацию с помощью вертикальных медиазапросов:

При этом заголовок в альбомной ориентации не будет фиксироваться.

Сокрытие менее важных элементов

Я заметил эту закономерность в навигации на Twitter.com. Идея в том, чтобы объединить вертикальные медиазапросы и паттерн Priority+.

При изменении высоты области просмотра менее важные элементы (закладки и списки) будут удалены и добавлены в меню More. Это хороший пример варианта применения для вертикальных медиазапросов.

А вот, собственно, реализация Твиттера, на этом видео.

Уменьшить интервал. Навигация

Это связано с предыдущим примером. У нас есть вертикальная навигация (она же боковая панель или aside ). Когда высота области просмотра мала, мы можем уменьшить вертикальное расстояние между элементами навигации, что улучшит общий дизайн.

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

Уменьшить расстояние. Секция hero

hero нужно вертикальное расстояние, чтобы дать пространство шрифту. Расстояние может уменьшаться в зависимости от высоты области просмотра.

Модальный компонент

Как вы, возможно, уже знаете, модальный компонент, как мы и ожидаем, будет центрирован по крайней мере по горизонтали. Однако вам может понадобиться, чтобы модальный компонент также центрировался вертикально. Это возможно, но повлечет появление ошибок при изменении содержимого. Как? Этот вопрос мы собираемся исследовать. При идеальном содержании модальный компонент выглядит, как показано ниже. До сих пор все было хорошо.

Однако все запутается, когда контент станет длиннее. Модальный компонент заполнит экран вертикально, и пользователь не сможет прокрутить его.

В этом случае причина проблемы заключается в следующем:

модальный компонент не имеет высоты,
он центрирован вертикально (так проблема проявилась раньше).

Вот обновленный код CSS.

Обратите внимание, что я использовал min-height и max-height . Первое свойство — чтобы сохранить внешний вид модального компонента, даже когда контент короткий, а второе — чтобы ограничить его высоту определенным значением, а не добавлять фиксированную высоту.

Заключение

При работе над впечатлениями пользователя лучше думать о них в терминах ширины и высоты. Может быть, странно изменять размер браузера вертикально, но это окупится. В этой статье я рассказал, насколько важно вертикальное тестирование и как мы можем это сделать, и, наконец, предложил несколько примеров и вариантов применения. Надеюсь, вы нашли эту статью полезной! Спасибо, что прочитали.

На тот случай, если вы подумываете повысить свою квалификацию или сменить сферу — промокод HABR даст вам получить дополнительные 10% к скидке указанной на баннере.

Адаптивная высота блока css

Сделать адаптивный шаблон сайта достаточно просто, но поддерживать элементы в сбалансированном виде во всех точках изменения шаблона — вот что является настоящим искусством. В данном уроке представлены 5 методов для использования в CSS для адаптивного шаблона. Есть очень простые свойства CSS, такие как min-width , max-width , overflow и относительные значения, но они все играют важную роль в разработке адаптивных дизайнов.

1. Адаптивное видео

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

2. Минимальная и максимальная ширина

Свойство max-width позволяет устанавливать максимальную ширину элемента. Его надо использовать, чтобы предотвратить расширение элемента за определенные рамки.

Контейнер со свойством max-width

В ниже приведенном примере определяется размер контейнера 800px, но устанавливается ограничение по размеру границу 90%.

Адаптивное изображение

Можно сделать изображение с автоматически изменяющимся размером до максимальной величины с помощью свойств max-width:100% и height:auto .

Выше приведенный код для адаптивного изображения работает в IE7 и IE9, но не действует в IE8. Для исправления ситуации нужно добавить свойство width:auto . Можно использовать условное правило CSS специально для IE8 или ниже приведенный трюк для IE:

Свойство min-width

Свойство min-width противоположно по действию свойству max-width . Оно устанавливает минимально возможную ширину элемента. Ниже приведен пример использования свойства min-width, чтобы поле ввода не становилось слишком маленьким при уменьшении масштаба.

3. Относительные значения

В адаптивном шаблоне использование относительных величин может существенно упростить код CSS и улучшить внешний вид дизайна.

Относительные поля

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

Относительный размер шрифта

С помощью относительных величин для размера шрифта (em или %) можно достаточно просто добиваться соответствующего изменения высоты строк и размеров отступов при адаптации шаблона под размер экрана устройства. Например, размеры всех связанных элементов автоматически изменяются при установке новых размеров размера шрифта для родительского элемента.

Относительные отступы

Нижеприведенный рисунок демонстрирует преимущества использования относительного значения в % для отступов. Блок слева имеет несбалансированное пространство при применении абсолютных величин в px. Блок справа имеет отличный вид с пропорциональным заполнением содержанием.

4. Трюк со свойством overflow:hidden

Отменить обтекание элемента текстом можно с помощью свойства overflow. Очень простой и полезный способ. Можно отменить обтекание текстом предыдущего элемента и сохранить структуру содержания.

5. Свойство word-break

Свойство max-width помогает разместить неломающийся текст (например, длинный адрес URL) в несколько строк вместо одной.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design
Перевел: Сергей Фастунов
Урок создан: 19 Мая 2012
Просмотров: 100963
Правила перепечатки

5 последних уроков рубрики "CSS"

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Есть родительский блок item , внутри него еще 2 блока: item_info и item_img Как сделать так чтобы блок item адаптировался по высоте относительно двух его дочерних блоков? ( item имеет свойство border-bottom — серую линию снизу. Как сделать так, чтобы эта линия оказалась под блоком?) Заранее спасибо | улучшить этот вопрос

1 ответ 1

Нашел решение через flex-box . Убрал все float и заменил на display:flex; Подробнее тут

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css div height или задайте свой вопрос.

Пример

Наша цель – получить вёрстку такого вида:

При этом блок с левой стрелкой должен быть отдельным элементом внутри контейнера.

Это удобно для интеграции с JavaScript, чтобы отлавливать на нём клики мыши.

То есть, HTML-код требуется такой:

Как это реализовать? Подумайте перед тем, как читать дальше…

Придумали. Если да – продолжаем.

Есть разные варианты, но, возможно, вы решили сдвинуть .toggler влево, при помощи float:left (тем более что он фиксированной ширины) и увеличить до height: 100% , чтобы он занял всё пространство по вертикали.

Вы ещё не видите подвох? Смотрим внимательно, что будет происходить с height: 100% …

Демо height:100% + float:left

А теперь – посмотрим этот вариант в действии:

Как видно, блок со стрелкой вообще исчез! Куда же он подевался?

Ответ нам даст спецификация CSS 2.1 пункт 10.5.

"Если высота внешнего блока вычисляется по содержимому, то высота в % не работает, и заменяется на height:auto . Кроме случая, когда у элемента стоит position:absolute ."

В нашем случае высота .container как раз определяется по содержимому, поэтому для .toggler проценты не действуют, а размер вычисляется как при height:auto .

Какая же она – эта автоматическая высота? Вспоминаем, что обычно размеры float определяются по содержимому (10.3.5). А содержимого-то в .toggler нет, так что высота нулевая. Поэтому этот блок и не виден.

Если бы мы точно знали высоту внешнего блока и добавили её в CSS – это решило бы проблему.