视口高度和.css（）

我想要实现的是获得浏览器的视口高度并将其添加到我的CSS的几个类。到目前为止，我有这样的：视口高度和.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

这将是非常巨大的，如果有人能在这里提供一些工作代码。我的编码技能非常有限。

来源

2013-05-12 Kev89

您是否试过（非常接近）您发布的代码？除了需要在字符串之外进行数学运算之外，它看起来是正确的。 – 2013-05-12 14:11:36

提示：'$（'。divThree'）.css（'top'，height + 200）;' – 2013-05-12 14:12:43

是的，语法的东西。这是我的主要问题:) – Kev89 2013-05-12 14:15:53

你的代码对我来说看起来很合适，除非你必须在字符串文字之外进行数学运算，并且因为你使用的是类，所以你需要一个类选择器（例如，".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"});

你可能还想给divs两到四个高度，否则他们只会和他们的内容一样高。而且您需要确保在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>

来源

2013-05-12 14:12:58

这看起来不错，我会测试它... – Kev89 2013-05-12 14:16:54

工程就像一个魅力。非常感谢T.J. :) – Kev89 2013-05-12 14:22:18

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

试一下......还记得。在divOne之前

来源

2013-05-12 14:13:21 Jackson

很好的捕获丢失的点，+1，但除此之外，这并没有真正回答这个问题... – 2013-05-12 14:18:18

这就是你要求的吗？

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-12 14:15:46

你也可以考虑将“position：absolute”css属性添加到div或更改“top”到“margin-top” – 2013-05-12 14:18:14

看起来也不错。谢谢！ – Kev89 2013-05-12 14:26:43

选择适合您的最合适的。我建议带变量的纯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-12 14:26:30 Qvcool

视口高度和.css（）

回答

相关问题