0

I am calculating the size of my Viewport using $(window).height() which returns 339 Now I want to break my screen into three parts. Top,middle,bottom. I want to know How can I calculate this knowing that the Screen Height returned is 339.

I want to know how many px out of the total(339) would be covered in 20% of top,60% of middle and 20% of bottom. How would I calculate this? Can anybody help me with this?Also, is my approach right?

enter image description here

Multi stack
  • 311
  • 3
  • 9
  • 18

1 Answers1

0

The math is really simple:

(winH = 339)

0.6 * winH = middleH (203.4)
0.2 * winH = topH, botH (67.8)

But hey! Why do you need jQuery?

html, body{height:100%; margin:0;}

#top,
#bot{
  height:20vh;
  background:#0bf;
}
#mid{
  height:60vh;
  background:#f0b;
}
<div id="top"> top </div>
<div id="mid"> mid </div>
<div id="bot"> bot </div>
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • Actually, I want to store top,middle,bottom pixels values in jquery variables. I have an HTML element and I want to compare its `position` with these variables. For example, `if($(element).position < top)` – Multi stack May 31 '16 at 18:04
  • So if my element lies in the bottom area, how would I know? – Multi stack May 31 '16 at 18:06
  • Basically, for this solution http://stackoverflow.com/questions/37485342/popover-auto-adjust-placement I am trying to get the top, middle and bottom areas of my screen so I can compare as to where my element lies – Multi stack May 31 '16 at 19:29