Как сделать, чтобы div подстроился под высоту окна браузера?

Привет. Как сделать, чтобы div с id="hei" подстроился под высоту окна браузера? То есть, чтобы при уменьшении высоты див подстраивался. Использую bootstrap. Может, на нем как-то можно? Помидорами не кидать.
  • Вопрос задан
  • 94781 просмотр
Решения вопроса 1
@IoannGrozny
Front-end разработчик
Зависит от контекста. Для современных браузеров подойдёт решение с CSS3 единицами 'vh';
Для старых браузеров придётся задействовать javascript и отслеживать высоту экрана.
caniuse.com/#feat=viewport-units - первый вариант, height: 100vh соответствует высоте окна браузера.
https://api.jquery.com/height/ - второй вариант, $(window).height вернёт высоту окна браузера.
По первому варианту:
#hei {
    height: 100vh; /* 100vh - 100% от высоты viewport(окна браузера) */
}

По второму варианту:
function setHeiHeight() {
    $('#hei').css({
        height: $(window).height() + 'px'
    });
}
setHeiHeight(); // устанавливаем высоту окна при первой загрузке страницы
$(window).resize( setHeiHeight ); // обновляем при изменении размеров окна
Ответ написан
Пригласить эксперта
Ответы на вопрос 6
@Kuzzy
Зависит от расположения вашего дива в DOM. Если он прямой потомок боди то достаточно просто задать ему высоту 100% и при этом не забыть указать для html и body высоту тоже в 100%. В целом - решений уйма, но все зависит от контекста, так что вам лучше выложить пример кода, чтобы получить адекватный ответ.
Ответ написан
Есть свойство в CSS3, позволяющее поступать очень гибко
height: calc(100% - 220px);
Естественно в старых браузерах не работает, а также не поддерживается в 12-й опере

Но если речь именно о 100%, то суть решения сводится к тому, чтобы выстроить родительскую цепочку DOM контрейнеров с высотой 100%
Ответ написан
function setheight(){
  var clientHeight = document.body.clientHeight;
  $('.hei').height(clientHeight);
}
$(document).ready(function() {
   function setheight();
});
$(window).resize(function(){
   function setheight();
});
Ответ написан
@montylab
если див с position: absolute/ fixed и не имеет рабительского блока с position: relative, то может помочь такой вариант top: 0; bottom: 0; - растянет блок на весь экран по высоте.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы