How to set the width of a div equal to the size of the browser window minus a specific number of pixels?

Question

JavaScript

codepen.io/anon/pen/RNaomd
We have a div with some width (100px) and a height of the entire window. The other div should take up all the remaining space, i.e. "browser_width - 100px".
I.e:

• extract the width of the browser window.var page_w = $("html").width();
• refer to the styles of the corresponding element.$(".main").css("width", page_w-100);

I need to implement this trivial task in CoffeeScript .

Answer 1

inscamp , not exactly as you wrote.
100% is from the size of the parent element.
If you need from the height/width of the screen, then special units of measure vw, vh, vmin, vmax appeared in css3 .

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

jsfiddle.net/g8es7qh5
In this case, the element will not depend in any way on the size of the parent element.
UPD
In addition, the height of the html block is not always equal to the height of the screen. By default, it has a height of auto , i.e. adjusts to the content. But even if you set a height of 100% for html (and for body too), then in this case it cannot be guaranteed that the height will become equal to the height of the screen.

Answer 2

Solved the problem without resorting to scripts using the CSS3 calc() feature

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

Answer 3

habrahabr.ru/post/126863

Answer 4

As far as I understand, we need the usual two-column layout .
JS and CS are definitely not needed here.