Атрибут height тега <iframe>
Описание
Атрибут height задаёт высоту элемента <iframe> в пикселях. Определяет, сколько вертикального пространства будет занимать фрейм на странице.
<iframe
src="https://example.com"
height="300"
width="500">
</iframe>
Особенности работы:
| Значение | Описание | Пример |
|---|---|---|
| Число | Высота в пикселях (без указания единиц) | height="400" |
| Проценты | Относительно родительского элемента (требует CSS) | style="height: 50%;" |
| Авто | Подстраивается под содержимое (через JavaScript) | style="height: auto;" |
Адаптивная высота через JavaScript:
<iframe
id="responsive-iframe"
src="content.html"
width="100%"
style="border: none;">
</iframe>
<script>
window.addEventListener('load', function() {
const iframe = document.getElementById('responsive-iframe');
iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
});
</script>
Рекомендации по использованию:
- Всегда указывайте ширину (
width) вместе с высотой - Для адаптивного дизайна используйте CSS вместо атрибута
- Минимальная рекомендуемая высота - 150px
- Избегайте значений меньше 50px (может нарушить доступность)
CSS-альтернативы:
<style>
/* Фиксированная высота */
.iframe-fixed {
height: 400px;
width: 100%;
}
/* Соотношение сторон 16:9 */
.iframe-16x9 {
width: 100%;
aspect-ratio: 16/9;
}
</style>
<iframe class="iframe-16x9" src="video.html"></iframe>
Ограничения и совместимость:
- Поддерживается всеми браузерами
- Значение в процентах работает только через CSS
- Минимальное значение может игнорироваться для сложного контента
- Может вызывать проблемы с макетом при ресайзе
Примечание: Для современных проектов предпочтительнее использовать CSS-свойства height и aspect-ratio вместо HTML-атрибута. Это обеспечивает лучшую адаптивность и контроль над отображением.