使用jquery获取窗口高度

Question

所以基本上，如果浏览器高度小于440px，我希望一个名为#content的div的css顶值为200px。然而，这似乎不起作用。我做错了什么？

var boh = $(window).height();
var bohi = parseInt(boh);
if(bohi < 440) {
    $("#content").css("top","200px");
} else {
    //this part works, so it's hidden
}

Answer 1

我认为您需要处理$(window).resize()事件，否则该逻辑将只运行一次。

<script type="text/javascript">

$(window).resize(function(){
  var bohi = $(window).height();
  if(bohi < 440) {
      $("#content").css("top","200px");
  } else {
      //this part works, so it's hidden
  }    
});

</script>

这是一个似乎可以工作的jsfiddle：

• http://jsfiddle.net/kNbuy/

请注意，$(window).height()不需要parseInt()，它已经被视为一个数字。

Answer 2

您需要将此代码放在文档就绪处理程序中，如下所示：

<script>

$(document).ready(function(){

var boh = $(window).height();
var bohi = parseInt(boh);
if(bohi < 440) {
    $("#content").css("top","200px");
} else {
    //this part works, so it's hidden
}

});

</script>

Answer 3

好的。我想我知道你的问题出在哪里了。

您尚未指定#content元素的'position‘属性是什么。如果你没有得到你想要的行为，我建议你尝试将position:absolute添加到#content的样式中。

我建议您仔细研究“position”属性是如何工作的。您可能会对更改#content及其父元素的position css属性所得到的结果感到惊讶。

此外，您可能需要考虑让页面自动执行一些代码，以便在用户调整浏览器窗口大小时进行自我调整。这可以用$.resize()来处理。