[英]Set height of div, relative to browser window height
Currently this determines window height and sets the height of .one
to 1/2 of the window height, and .two
to 1/4 of the window height. 当前,这确定窗口高度,并将.one
的高度设置为窗口高度的1/2,将.two
的高度设置为窗口高度的1/4。
How could this be reformatted to use a percentage-based heights instead of the fractions? 如何将其重新格式化为使用基于百分比的高度而不是分数?
I'd like to do something like 80%/20% or 70%/30%. 我想做80%/ 20%或70%/ 30%之类的事情。 Thanks in advance. 提前致谢。
$(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'});
});
});
Why not use CSS? 为什么不使用CSS?
html, body{
height: 100%;
}
.one{
height: 50%;
}
.two {
height: 25%;
}
$(function(){
$(window).load(function(){
$('.one').css({'height':($(window).height()/2)});
});
});
It is not necessary to say 'px'
in your coding. 无需在编码中说'px'
。 it won't take any effect.. if don't set it will take as pixel only. 它不会有任何效果..如果不设置,它将仅作为像素。 To reduct 50% height you can calculate it in fractions as 50/100=1/2
. 要降低50%的高度,您可以按50/100 50/100=1/2
分数进行计算。 So above coding will reduce your height 50%.. similary for 25% use 25/100=1/4
因此,上述编码将使您的身高降低50%。25%的相似度使用25/100 25/100=1/4
Here you go: Fiddle: http://jsfiddle.net/Lk7Ve/ and http://jsfiddle.net/Lk7Ve/2/ 在这里,您可以开始:Fiddle: http : //jsfiddle.net/Lk7Ve/和http://jsfiddle.net/Lk7Ve/2/
This is for 50% and 25%. 这是50%和25%。 If you want it for 80% and 20%, you'll have to multiply by (4/5) and (1/5) respectively. 如果要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'});
});
For 80% and 20% 对于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'});
});
Actually I recommend to get the height of window
on both the events first. 实际上,我建议先获取两个事件的window
高度。 And then apply the simple math calculations. 然后应用简单的数学计算。
$(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%
});
});
or you can store the unit height of the window in the variable and the apply as much percentage as you want, like: 或者您可以将窗口的单位高度存储在变量中,并根据需要应用尽可能多的百分比,例如:
$(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
});
});
Tip: 小费:
Good luck! 祝好运! Happy jQuery!! 快乐的jQuery!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.