设置div的高度，相对于浏览器窗口高度

目前，这确定窗口高度并将.one的高度设置为窗口高度的1/2，以及窗口高度的.two到1/4。

如何重新格式化以使用基于百分比的高度而不是分数？

我想做80％/ 20％或70％/ 30％的事情。 提前致谢。

 $(function(){ $(window).load(function(){ $('.one').css({'height':(($(window).height()/2))+'px'}); $('.two').css({'height':(($(window).height()/4))+'px'}); }); $(window).resize(function(){ $('.one').css({'height':(($(window).height()/2))+'px'}); $('.two').css({'height':(($(window).height()/4))+'px'}); }); }); 

Answer 1

实际上我建议首先在两个事件上获得window的高度。 然后应用简单的数学计算。

 $(function(){ $(window).bind("load resize", function(){ _winHeight = $(window).height(); // Setting Height $('.one').css({'height':_winHeight * 0.5}); // 0.5 = 50%, 0.8 = 80% $('.two').css({'height':_winHeight * 0.25}); // 0.25 = 25% }); }); 

或者您可以将窗口的单位高度存储在变量中，并根据需要应用尽可能多的百分比，例如：

 $(function(){ $(window).bind("load resize", function(){ _winHeight = $(window).height()/100; // Setting Height $('.one').css({'height':_winHeight * 50}); // 50% Height $('.two').css({'height':_winHeight * 25}); // 25% Height }); }); 

小费：

• 尝试将加载和resize事件绑定在一起，这将节省您的代码长度。
• 此外，没有必要在jquery中提及具有高度的单元px。

祝好运！ 快乐的jQuery !!

Answer 2

为什么不使用CSS？

 html, body{ height: 100%; } .one{ height: 50%; } .two { height: 25%; } 

Answer 3

 $(function(){ $(window).load(function(){ $('.one').css({'height':($(window).height()/2)}); }); }); 

没有必要在编码中说'px' 。 它不会产生任何影响..如果不设置它将仅作为像素。 要减少50％的高度，您可以将其计算为分数为50/100=1/2 。 所以上面的编码会降低你的身高50％..相似的25％使用25/100 25/100=1/4

Answer 4

在这里你去：小提琴： http ： //jsfiddle.net/Lk7Ve/和http://jsfiddle.net/Lk7Ve/2/

这是50％和25％。 如果你想要80％和20％，你必须分别乘以（4/5）和（1/5）。

 $(document).ready(function(){ $('.one').css({'height':(($(window).height()/2))+'px'}); $('.two').css({'height':(($(window).height()/4))+'px'}); }); $(window).resize(function(){ $('.one').css({'height':(($(window).height()/2))+'px'}); $('.two').css({'height':(($(window).height()/4))+'px'}); }); 

80％和20％

 $(document).ready(function(){ $('.one').css({'height':(($(window).height() * (4/5)))+'px'}); $('.two').css({'height':(($(window).height() * (1/5)))+'px'}); }); $(window).resize(function(){ $('.one').css({'height':(($(window).height() * (4/5)))+'px'}); $('.two').css({'height':(($(window).height() * (1/5)))+'px'}); });