Как сделать резиновую высоту блока css
Обновлено: 05.07.2024
Резиновое видео HTML5
Видео элемент HTML5 вы можете легко сделать резиновым при использовании max-width:100%. Как упомянуто во введении, этот трюк не работает, если использовать iframe или другие методы, которыми пользуются большинство сайтов для хранения видео, таких как YouTube и Vimeo.
Резиновый объект & встроенное видео
На самом деле, решение очень простое. Вы должны поместить видео в отдельный div блок и выставить значения нижнего внутреннего отступа в 50%-60%. Затем можно определить дочерние элементы (iframe, встраиваемый объект), 100%-ая ширина, 100%-ая высота, с абсолютным позиционированием. Это и есть решение нашей задачи.
Как создать фиксированную ширину + резиновый принцип
Чтобы ограничить ширину видео, нам снова понадобится дополнительный div. Далее воспользуемся свойством max-width:100 %.
Совместимость
Это решение работает на всех браузерах (проверены на Chrome, Safari, Firefox, Internet Explorer, Opera, iPhone и iPad).
5 последних уроков рубрики "CSS"
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
Сделать адаптивный шаблон сайта достаточно просто, но поддерживать элементы в сбалансированном виде во всех точках изменения шаблона – вот что является настоящим искусством. В данном уроке представлены 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) в несколько строк вместо одной.
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 или задайте свой вопрос.
Похожие
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.1.17.35809
Обычно свойство height , указанное в процентах, означает высоту относительно внешнего блока.
Однако, всё не так просто. Интересно, что для произвольного блочного элемента 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 – это решило бы проблему.
Сегодня я поделюсь с вами одним трюком, с которым я столкнулся, работая с CSS. С его помощью можно динамически масштабировать любой HTML-элемент, а заодно устранить многие причины, по которым раньше приходилось писать медиа-запросы.
Прежде всего, я хотел бы отдать должное Майку Ритмюллеру за то, что он изначально придумал эту функцию, и Джеффу Грэму из CSS-Tricks за расширение её функциональности. Я ни в коем случае не ставлю себе в заслугу создание этой функции. Я только хочу пропеть ей хвалу.
Итак, давайте приступим к применению стилей.
Формула
В CSS по умолчанию присутствует возможность применять базовые математические операции с помощью функции calc() . Благодаря ей мы можем решить любое простое математическое уравнение и установить полученный результат в качестве свойства CSS, которому требуется численное значение. calc() может применяться везде: от font-size до width и box-shadow … .
В CSS также есть средство измерения, которое вычисляет viewport height и viewport width окна браузера: vh и vw соответственно. 100vh обозначает всю высоту окна браузера, а 100vw — всю ширину. Разница между 100% и 100vh / 100vw в том, что 100% устанавливается относительно селектора, внутри которого происходит определение, в то время как значение 100vh / 100vw — абсолютное для окна браузера. Это различие важно.
Объяснив этот момент с calc() и 100vh / 100vw , пропущу несколько шагов и перейду прямо к формуле.
Она позволяет динамически масштабировать любое свойство с числовым значением, основанным на ширине или высоте браузера:
Хорошо… Давайте разбираться.
Во-первых, взглянем на правую часть уравнения:
Нам нужно установить минимальный размер для элемента element , так, чтобы любой element , который мы хотим масштабировать, не был равен 0px . Если мы хотим, чтобы элемент был размером не менее 25px , то можем подставить это значение в первую часть calc() :
Нам важна левая часть:
Разберёмся с ней:
Здесь мы устанавливаем диапазон через минимальный и максимальный размер, который хочется видеть у элемента, и эта разность будет действовать как множитель. Если нужно, чтобы размер элемента находился в пределах между 25px и 50px , мы можем подставить сюда такие значения:
Третья часть сложнее всего:
Здесь мы можем задать диапазон через минимальное и максимальное ожидаемое разрешение браузера. На десктопе я всегда, исходя из опыта, беру 1920px (горизонтальное разрешение для 1080p) и 500px (самое маленькое разрешение, до которого возможно масштабировать в Chrome без инструментов разработчика).
Подставим эти значения, и крайняя слева часть уравнения примет следующий вид:
Это создаёт соотношение, основанное на величине значения свойства viewport (окна просмотра) браузера. Всё, что выходит за пределы диапазона между 500px и 1920px , будет масштабироваться вверх или вниз, но с линейной скоростью. Мы также можем написать медиа-запрос для мобильных устройств или сверхшироких мониторов или записать эти исключения в саму функцию calc() .
Давайте начнём упрощать: подставим в функцию некоторые числа и посмотрим на неё в действии. Мы можем заменить 100vw любым разрешением, чтобы увидеть соотношение, которое устанавливаем для размера нашего element :
Если затем взять множитель размера элемента, заданный ранее, и умножить на это соотношение, то в итоге получится динамическое значение размера нашего элемента, основанное на размере viewport :
Наконец, если мы затем добавим минимальный размер элемента к этому множителю, то получим окончательный размер элемента:
Итак, если мы хотим, чтобы элемент был равен 25px , когда ширина браузера равна 500px , и 50px , когда ширина браузера равна 1920px , вся функция будет выглядеть следующим образом:
Запутанно? Ещё как.
Что получаем в итоге:
Теперь перейдём к примерам.
Предварительная настройка
У меня есть очень простая настройка “скелета” HTML с импортом CSS-файла:
В хроме это выглядит так:
Ширина
Давайте для начала поиграем с шириной width у square и small_square с помощью нашей новой причудливой функции масштабирования.
Допустим, нам нужно, чтобы ширина square была равна максимум 1500px и минимум 250px .
Для примера, чтобы блоки были одной высоты, я использую три способа, с помощью которых можно легко сделать и выровнять div по высоте. Первые два способа для этой цели исключительно используют css, а в третьем подключим скрипт js.
А во-втором примере помимо этого, можно будет подогнать содержимое блока в подходящее для вас место.
1 способ выравнивания div по высоте с помощью height.
Мы сделаем непосредственно каждому блоку div одинаковую высоту с помощью CSS свойства height .
И для начала мы зададим каждому блоку свой класс и пропишем для них необходимые свойства для выравнивания div между собой по высоте.
Вот, что у нас получилось.
В этом примере для визуального отображения я с помощью свойств: border задал блокам рамку, box-shadow - сделал css тень для блока ( более красивый вид ), display - прописал inline-block , то есть сделал блоки в один ряд, width - задал ширину, и последнее с помощью height выровнял и сделал блоки div по высоте.
Минус этого варианта : количество букв и слов ( мой пример ) в каждом блоке может быть не одинаковым и поэтому текст в блоке может выходить за его пределы ( за рамку ), что будет отображаться не красиво. Да и при различных разрешениях экрана может присутствовать данный негатив.
Для избежания этого я прописал в CSS свойство overflow-y со значением auto , где выступающий за пределы текст просто будет обрезаться, и в итоге образовалась вертикальная прокрутка.
Этот вариант в основном используют в том случае, когда в блоках div прописывается примерно одинаковая медийно и текстовая информация.
Что бы избежать подобных ситуаций, необходимо воспользоваться вторым или третьим вариантом.
Выравнивание высоты div при помощи Flex
Flex буквально недавно внедрился в css и показал отличные результаты для правильной постановки блоков и его содержимого по позициям.
Задайте необходимую позицию блока DIV и его содержимому, и после скопируйте полученный код в Результат CSS и HTML .
Читайте также: