屏幕视口使用$（window）.height（）

Question

我使用$(window).height()计算视口的大小，返回339 现在我想将屏幕分成三部分。上，中，下。我想知道如何知道返回的屏幕高度是339。

我想知道在20％的顶级，60％的中间和20％的底部将覆盖总数（339）中有多少px。我该如何计算？有人可以帮我这个吗？另外，我的做法是对的吗？

Answer 1

数学很简单：

  

（winH = 339）

     

0.6 * winH = middleH（203.4）
    0.2 * winH = topH，botH（67.8）

但是嘿！你为什么需要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>