Как подогнать размер div'a под клиентсую область окна браузера?

Question

[inscamp]

Используя JavaScript необходимо подогнать размер div'a под размер клиентской области браузера (т.е. размеров окна браузера за вычетом пространства включающего в себя весь пользовательсий интерфейс). При том размеры div'a и окна должны совпадать при ресайзе.

Мой способ:
Cразу скажу, что вижу тут как минимум два неприятных момента:
• Костыль в виде 15px
• Размер div'a равен размеру окна лишь в момент загрузки страницы. Аадаптация как таковая отсутсвует.

function O(obj)
{
if (typeof obj == 'object') return obj
else return document.getElementById(obj)
}

function S(obj)
{
return O(obj).style
}

browserWindow = $(window);
xxx = browserWindow.width() - 15; // учитывая ширину скроллбара, равную 15px
yyy = browserWindow.height();

S('ID_of_my_div').width = xxx;
S('ID_of_my_div').height = yyy;

Вопрос в том, как создать

Answer 1

[Юрий Лобанов]

Я или не понимаю, чего Вы хотите, или Вы не понимаете, что тут можно обойтись или html/css, или несколькими строчками jquery, который Вы все равно используете.

codepen.io/iiil/pen/znimg

Answer 2

[volkhin]

1) нужно в событии window.onResize получать текущие размеры окна и меня при необходимости размеры div'а
2) Чем не устраивает width = 100%?

Answer 3

[Snewer]

учитывая ширину скроллбара, равную 15px

Не правда. Ширина в каждом браузере своя

Answer 4

[Никита Рябин]

Сверстайте просто шаблон нормально, и не нужно будет никаких скриптов.

Answer 5

[Quber]

Это делается через css. Просмотрите бегло файл bootstrap.css в течение 5 минут и сразу станет понятно.

Answer 6

[Володимир Годяк]

// код на jQuery
$(window).bind('load resize', function(){
var d = $('#myDiv'), // блок який треба розтягнути
wh = $(window).height(), // or outerHeight();
ww = $(window).width(); // or outerWidth(); 
d.css({
height: wh,
width: ww
});
});

Answer 7

[inscamp]

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

Код, который помог мне

function getClientHeight(){
return document.compatMode=='CSS1Compat' &&
!window.opera?document.documentElement.clientHeight:document.body.clientHeight;
}

А далее, используя вышеобъявленную функцию S:

<script>
$y = getClientHeight();
		
S('block1').height = $y;
S('block2').height = $y;
S('block3').height = $y;
</script>

А с шириной всё и так ясно – whidth = 100%;