0

我正在尝试使用 jquery 将元素的高度设置为等于用户浏览器。这是我到目前为止无法正常工作的代码。是因为我在 css 中设置了最小高度吗？我真的需要那个类来等于用户的分辨率。

<script type="text/javascript">
jQuery(function() { 
    jQuery(".bg").css("height", jQuery(window).css("height"));
}
</script>
4

5 回答 5

2

将变量设置为window.innerHeight

$(document).ready(function() {
    var height = window.innerHeight;
    $(".bg").css("height", height);
});

有关. _ _window.innerHeight

window.innerHeight如您所问，返回用户视口的高度，而不是真正的屏幕分辨率，但它有效。还有window.innerWidth其他方法可以获取用户的屏幕统计信息。

您也可以使用self.innerHeight, parent.innerHeight,top.innerHeight但它们有不同的用途。（见链接）。

此外，您正在使用$(window).css("height");jQuerycss()函数分配css 值，它不返回字符串。那是$(window).height()因为height()确实返回了一个字符串。

var height = function() { return this.length; }
// height() returns "this.length"
于 2013-01-23T18:11:00.207 回答
1

试试这个，它保持图像的纵横比

$(function(){
var ratio = $("img").width() / $("img").height();
var newWidth = ($(window).height()-10) * ratio;
if(newWidth > $(window).width())
        $("img").css("width","100%");
    else
        $("img").css("width",newWidth+"px");
$(window).resize(function(){
    var ratio = $("img").width() / $("img").height();
    var newWidth = $(window).height() * ratio;
    if(newWidth > $(window).width()){
        $("img").css("width","100%");

        }
    else{
        $("img").css("width",newWidth+"px");

        }
});
});
于 2013-01-23T18:12:10.470 回答
0

你必须使用jQuery(window).height(). Windows 实际上没有随分辨率变化的动态高度 css 属性。

于 2013-01-23T18:09:51.330 回答
0

要设置“元素”高度，您需要设置窗口的高度。

$('element').height($(window).height());
于 2013-01-23T18:09:55.963 回答
0

您可以使用此 javascript 脚本来获取浏览器的高度和宽度。它还支持多种浏览器：

var viewportwidth;
var viewportheight;
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

if (typeof window.innerWidth != 'undefined') {
    viewportwidth = window.innerWidth,
    viewportheight = window.innerHeight
}

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
    viewportwidth = document.documentElement.clientWidth,
    viewportheight = document.documentElement.clientHeight
}

// older versions of IE

else {
    viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
    viewportheight = document.getElementsByTagName('body')[0].clientHeight
}

浏览器的宽度和高度将分别存储在viewportwidth和viewportheight变量中。然后你可以使用类似的东西

var bg = document.getElementById("bg");
bg.style.height = viewportheight;

这会将具有 idbg高度的元素设置为视口高度。

于 2013-01-23T18:11:26.490 回答