2

我想要实现的是获取浏览器的视口高度并将其添加到我的 css 的几个类中。到目前为止，我有这个：

获取视口高度：

var width = $(window).width();
var height = $(window).height();

添加到 CSS

$('divOne').css({"height": " *viewport height* "});
$('divTwo').css({"top": " *viewport height* "});
$('divThree').css({"top": " *viewport height* + 200px"});
$('divTwo').css({"top": " *viewport height* + 400px "});

样本：

样本

如果有人可以在这里提供一些工作代码，那就太好了。我的编码技能非常有限。

4

4 回答 4

2

您的代码对我来说看起来很正确，除了您必须在字符串文字之外进行数学运算，并且因为您使用的是类，所以您需要一个类选择器（例如，".divOne"而不是“divOne”），例如：

var width = $(window).width();
var height = $(window).height();
$('.divOne').css({"height": height + "px"});
$('.divTwo').css({"top": height + "px"});
$('.divThree').css({"top": (height + 200) + "px"});
$('.divTwo').css({"top": (height + 400) + "px"});

您可能还想为 div 提供 2 到 4 个高度，否则它们只会与内容一样高。并且您需要确定在 div 上运行的脚本在标记中的 div之后，以便在代码运行时它们存在。（或者使用 jQuery 的ready事件，但如果您控制脚本标签的位置，则不需要这样做。）

这是一个添加高度等的示例：Live Copy | 直播源

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Div Height And Such</title>
</head>
<body>
  <div class="divOne">divOne</div>
  <div class="divTwo">divTwo</div>
  <div class="divThree">divThree</div>
  <div class="divFour">divFour</div>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script>
  var width = $(window).width();
  var height = $(window).height();
  $('.divOne').css({"height": height + "px"});
  $('.divTwo').css({
    "top": height + "px",
    "height": "200px"
  });
  $('.divThree').css({
    "top": (height + 200) + "px",
    "height": "200px"
  });
  $('.divTwo').css({
    "top": (height + 400) + "px",
    "height": "200px"
  });
  </script>
</body>
</html>
于 2013-05-12T14:12:58.697 回答
1 
 $('.divOne').css({
     "height": $(window).height()
 })

试试看...记住 . 在 divOne 之前

于 2013-05-12T14:13:21.173 回答
1

这是你要求的吗？

var height = $(window).height();
$('.divOne').css({"height": height+"px"});
$('.divTwo').css({"height":  height+"px"});
$('.divTwo').css({"top":  height+"px"});
$('.divThree').css({"top": height+200});
$('.divTwo').css({"top":  height + 400});
于 2013-05-12T14:15:46.580 回答
1

选择最适合您的。我建议使用带有变量的纯 JavaScript。

// NO VARIABLES
  // pure JavaScript
  document.getElementById("divOne").style.height =
      document.documentElement.clientHeight;
  document.getElementById("divOne").style.height =
      document.documentElement.clientHeight;
  document.getElementById("divOne").style.height =
      parseFloat(document.documentElement.clientHeight) + 200 + "px";
  document.getElementById("divOne").style.height =
      parseFloat(document.documentElement.clientHeight) + 400 + "px";

  // jQuery
  $("#divOne").style.height = $(window).height();
  $("#divTwo").style.height = $(window).height();
  $("#divThree").style.height = parseFloat($(window).height()) + 200 + "px";
  $("#divFour").style.height = parseFloat($(window).height()) + 200 + "px";

// WITH VARIBLES
  // pure JavaScript   <-- SUGGESTED
    var viewportHeight = parseFloat(document.documentElement.clientHeight);
    document.getElementById("divOne").style.height = viewportHeight + "px";
    document.getElementById("divTwo").style.height = viewportHeight + "px";
    document.getElementById("divThree").style.height =
        viewportHeight + 200 + "px";
    document.getElementById("divFour").style.height =
        viewportHeight + 400 + "px";
  // jQuery
    var viewportHeight = parseFloat($(window).height());
    $("#divOne").style.height = viewportHeight + "px";
    $("#divTwo").style.height = viewportHeight + "px";
    $("#divThree").style.height = viewportHeight + 200 + "px";
    $("#divFour").style.height = viewportHeight + 400 + "px";
于 2013-05-12T14:26:30.053 回答