視口高度和.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（）

回答

相關問題