Question

我想要实现的是获取浏览器的视口高度并将其添加到我的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 "});

样品：

Sample

如果有人能在这里提供一些有用的代码，真的很棒。我的编码技巧非常有限。

Answer 1

你的代码看起来对我来说是正确的，除了你必须在字符串文字之外进行数学计算，并且因为你正在使用类，你需要一个类选择器（例如，".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两到四个高度，因为否则它们只会和它们的内容一样高。并且您需要确保在div上运行的脚本是之后标记中的div，以便它们在代码运行时存在。（或者使用jQuery的ready事件，但如果您控制脚本标记的位置，则不需要这样做。）

这是一个增加高度等的例子：Live Copy | Live Source

<!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>

Answer 2

 $('.divOne').css({
     "height": $(window).height()
 })

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

Answer 3

这就是你要求的吗？

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});

Answer 4

选择最适合你的人。我建议使用带变量的纯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";

视口高度和.css（）

4 个答案: