通过css确定屏幕高度的正确方法是什么?

时间:2012-05-25 20:03:30

标签: html css

我想要一个布局,我有四个彩色div。说红蓝绿黄,所有这些都等于页面滚动的高度。就像我在屏幕上翻页时它应该显示蓝色然后绿色然后黄色加载它应该显示红色。

http://jsfiddle.net/Bv6JU/1/这里是小提琴,让我们改进它。

1 个答案:

答案 0 :(得分:1)

在jquery中(在纯javascript中可能很简单,但我是一个jquery-oholic)...

<div class="screensize" style="background-color:red"></div>
<div class="screensize" style="background-color:blue"></div>
<div class="screensize" style="background-color:green"></div>
<div class="screensize" style="background-color:yellow"></div>
<script type="text/javascript">
$(function() {
  $(".screensize").css("height",$(window).height() + "px");
})
</script>

编辑: 哦,就像我说的,如果你想在人们调整窗口大小时保持大小一致,你会捕获resize事件并再次调整div的大小。所以你要将这一行添加到函数中......

$(window).resize(function() {
  $(".screensize").css("height",$(window).height() + "px");
})