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

Question

[Space]

Привет. Как сделать, чтобы div с id="hei" подстроился под высоту окна браузера? То есть, чтобы при уменьшении высоты див подстраивался. Использую bootstrap. Может, на нем как-то можно? Помидорами не кидать.

Answer 1

[Иван Беленков]

Зависит от контекста. Для современных браузеров подойдёт решение с 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 ); // обновляем при изменении размеров окна

Comments

[Space]

вторая ссылка не работает.@IoannGrozny

[Иван Беленков]

@ruslite Странно, у меня всё работает, в любом случае это просто ссылка на API jQuery, найти механику работы не составит труда.

[Space]

@IoannGrozny работает, сделал так, чтобы отступ был.

function setHeiHeight() {
			$('.fixed-sakh').css({
				height: $(window).height() - 90 + 'px'
			});
		}
		
		setHeiHeight(); // устанавливаем высоту окна при первой загрузке страницы
		$(window).resize( setHeiHeight ); //

[Space]

спасибо

[devme]

Всё работает! Отличное решение для размещения видео-фона на весь монитор!

[I.CaR Soft]

Cosmos: Скрипт не работает. Или как его применять?

[Василий]

Спасибо! Очень помогло!

[Евгений Сидаш]

I.CaR Soft, у вас был подключен jQuery выше этого скрипта?

Answer 2

[Kuzzy]

Зависит от расположения вашего дива в DOM. Если он прямой потомок боди то достаточно просто задать ему высоту 100% и при этом не забыть указать для html и body высоту тоже в 100%. В целом - решений уйма, но все зависит от контекста, так что вам лучше выложить пример кода, чтобы получить адекватный ответ.

Answer 3

[Александр]

Есть свойство в CSS3, позволяющее поступать очень гибко
height: calc(100% - 220px);
Естественно в старых браузерах не работает, а также не поддерживается в 12-й опере

Но если речь именно о 100%, то суть решения сводится к тому, чтобы выстроить родительскую цепочку DOM контрейнеров с высотой 100%

Answer 4

[Ольга Стогова]

function setheight(){
  var clientHeight = document.body.clientHeight;
  $('.hei').height(clientHeight);
}
$(document).ready(function() {
   function setheight();
});
$(window).resize(function(){
   function setheight();
});

Comments

[I.CaR Soft]

Скрипт не работает.

Answer 5

[ttm]

habrahabr.ru/post/189252

Answer 6

[svd71]

height: 100%;

Comments

[Space]

@svd71 для новых браузеров только?

[svd71]

не проверял на старых. но уже полгода использую на фоксе и хроме довольно лохматых версих (фф 19.02.) - и там и там отображает одинаково.

[Ольга Стогова]

это не будет работать

[Space]

@Aingis это все костыльно

[Space]

и у вас hey и hei

Answer 7

[montylab]

если див с position: absolute/ fixed и не имеет рабительского блока с position: relative, то может помочь такой вариант top: 0; bottom: 0; - растянет блок на весь экран по высоте.

Comments

[Space]

@montylab имеет)

[Xalium]

fixed по фигу чего он так имеет.