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

Question

[inscamp]

codepen.io/anon/pen/RNaomd
Имеем див с некоторой шириной (100px) и высотой во всё окно. Другой див должен занимать всё оставшееся пространство, то есть "ширина_браузера - 100px".

То есть:

• извлечь ширину окна браузера.var page_w = $("html").width();
• обратиться к стилям соответсвующего элемента.$(".main").css("width", page_w-100);

Эту тривиальную задачу мне необходимо реализовать на CoffeeScript.

Answer 1

[bromzh]

inscamp, не совсем так., как ты написал.
100% - это от размеров родительского элемента.
Если тебе нужно от высоты/ширины экрана, то в css3 появились специальные единицы измерения vw, vh, vmin, vmax.

width: calc(100vw - 100px);
height: calc(100vh - 100px);

jsfiddle.net/g8es7qh5
При этом, элемент не будет никак зависеть от размеров родительского элемента.

UPD
Кроме того, высота блока html далеко не всегда равна высоте экрана. По-умолчанию, он имеет высоту auto, т.е. подстраивается под контент. Но даже если задать для html высоту в 100% (и для body тоже), то и в этом случае нельзя гарантировать, что высота станет равной высоте экрана.

Answer 2

[inscamp]

Решил проблему не прибегая к скриптам с помощью фичи CSS3 calc()

.main {
width: calc(100% - 100px);
}

Comments

[inscamp]

К сожалению это не работает с тем же успехом для высоты. Так что вопрос всё же ещё актуален. С той лишь разницей, что менять нужно высоту.

[GM2mars]

Не забываем заглядывать на caniuse.com/#search=calc

Answer 3

[Иван]

habrahabr.ru/post/126863

Answer 4

[Родион Мещеряков]

Насколько я понимаю, нужна обычная двухколоночная верстка.

JS и CS тут точно не нужны.