How to make the height of the section depending on the height of the client area of the browser?

There are different sites with Flat design, which sections are high and often do not require adjustment for the height of the client area of the browser (example), but there are sites like what I'm doing now, which sections are small, and most often the height is less than the size of the client area. And I think it would be very cool if the height was the same as the visitor, the menu will send the visitor to another section, then it will look beautiful. So is implemented here on this site.
The client area is that part of the screen that the user sees in the browser. That is, the height of it is smaller than the screen because the panels in the browser and the operating system. If I'm wrong, please correct me.
So, may be there is ready solution? Or you can take the script directly from the site listed in the example? I will be very glad to consider your offers. I myself do layouts.
October 3rd 19 at 01:35
3 answers
October 3rd 19 at 01:37
Solution
But such an option without js will not work ?
http://codepen.io/delch/pen/FndbG
To get?! On this, I could not think. That is, this method does not entail any pitfalls and side effects? I didn't even know that was possible to do. Annoying me only the Height parameter from the .content. What to do if blocks 7, for example. - Taryn.Hintz commented on October 3rd 19 at 01:40
That's what I would and could call a reef. If blocks network then wrapper = 100 * 7, and each content is equal to 100 / 7 = 14.285714285714286. For even number blocks is certainly handy for the odd problems. - glenna_Hauck commented on October 3rd 19 at 01:43
As an option to create Javascript code that will solve this problem? For six blocks by the way is also not an option, so that not only is odd. - Taryn.Hintz commented on October 3rd 19 at 01:46
Well, in any case you can still do so http://codepen.io/delch/pen/dALhB - glenna_Hauck commented on October 3rd 19 at 01:49
OOO, thank you. Here above I suggested that the problem can be solved writing section { min-height: 100vh }. Soon I will understand how cross-browser it is and whether it works at all. - Taryn.Hintz commented on October 3rd 19 at 01:52
viewport Height is not particularly cross-browser) http://caniuse.com/#search=vh - glenna_Hauck commented on October 3rd 19 at 01:55
October 3rd 19 at 01:39
Solution
http://api.jquery.com/height/

or

var winH=0; var winW=0;
if (document.body && document.body.offsetWidth) {
 winW = document.body.offsetWidth;
 winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
 document.documentElement &&
 document.documentElement.offsetWidth ) {
 winW = document.documentElement.offsetWidth;
 winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
 winW = window.innerWidth;
 winH = window.innerHeight;
}
console.log(winH+'x'+winW);
Unfortunately I don't know JS, and my English is not so good. But thanks for the link, now I know that jQuery can help with that. - Taryn.Hintz commented on October 3rd 19 at 01:42
As I understand it using jQuery it is very simple. Could not be anyone to demonstrate how it is possible to make the height parameter of a specific div to make the height of the client area? - glenna_Hauck commented on October 3rd 19 at 01:45
As indicated in your code to specify the desired class or ID to which you want to apply a height? - Taryn.Hintz commented on October 3rd 19 at 01:48
October 3rd 19 at 01:41
Solution
As an option:
viewport units
body > section { min-height: 100vh }
I know about this option, but it is inconvenient that it is necessary to choose for each screen value. - Taryn.Hintz commented on October 3rd 19 at 01:44
What, excuse me? `100vh` is a full-height view-porta independent of the screen. - glenna_Hauck commented on October 3rd 19 at 01:47
Do not understand you can from this point in detail, I thought you propose to do for different screens, their values. It is possible to register and 100vh to be the height of the client area? - Taryn.Hintz commented on October 3rd 19 at 01:50
No, of course, 100vh, where 1vh is 1% of the height of the view port. This solution the easiest and best, but unfortunately only for IE9+. jsfiddle - glenna_Hauck commented on October 3rd 19 at 01:53
That for IE9, it's fine. Certainly not perfect, but still best solution. Thank you so much. This is the best option, I guess. But will test later. - Taryn.Hintz commented on October 3rd 19 at 01:56
A link here in the comments, as I understand do not work. Maybe the problem is in your quotes. jsfiddle - glenna_Hauck commented on October 3rd 19 at 01:59
And be sure to use min-height? Or is it that if the material is more, and the size of the partition will increase? - Taryn.Hintz commented on October 3rd 19 at 02:02
Probably some tags are not working Yes, min-height in case material is greater than the height of the browser. - Taryn.Hintz commented on October 3rd 19 at 02:05
Don't know why, but I have on codepen.io (http://codepen.io/Vany/pen/jdJGs) does not get to do the same. But at the same jsfiddle.net when creating the same file everything works. I do not understand what could be the problem. - Taryn.Hintz commented on October 3rd 19 at 02:08
However, in the browser everything appears fine, apparently this is a bug in codepen. Thanks for the help. I will show you the article when I write an article about possible solutions. I can even give a link to my site or the page to which to refer. The standard for this profile. - Taryn.Hintz commented on October 3rd 19 at 02:11
Look at the code pen there is a double nesting `iramoo` and it looks like they somehow cleverly still manage their dwell, that manifested some kind of bug... browser after resizing the browser it all falls into place. - keshawn_Goodwin commented on October 3rd 19 at 02:14
Yes Yes, I understand. I realized that there is one bug that when you write to a man and point a link to it. It must be viewed separately and the message as a comment and alerting you specify "me" in some comments. You'll see. - Taryn.Hintz commented on October 3rd 19 at 02:17
Yeah, it's just here once bagno getting notifications about new comments, but the direct reference is "bulletproof" method ;) - keshawn_Goodwin commented on October 3rd 19 at 02:20
manually tried to mention a user. Does not show up as a link, respectively, and the alert does not come. So - Taryn.Hintz commented on October 3rd 19 at 02:23
Probably not, because it was not written in the comments, and in response to the question. - Taryn.Hintz commented on October 3rd 19 at 02:26
Do, it's all good .. )_ - Taryn.Hintz commented on October 3rd 19 at 02:29

Find more questions by tags JavaScript