javascript – 使用JS查找屏幕高度,然后通过CSS将其应用于div类

2022-08-15 13:05:15

我正在进行单页滚动到网页设计,但无法使用此代码.

我要做的是通过JavaScript获取用户的屏幕高度.

然后我想将此屏幕高度应用于我的div类,这样我将始终拥有一个与用户屏幕分辨率大小相同的容器.可以说,液体设计总是适合屏幕.

这是我想要变量屏幕高度的简短示例：

<script type="text/javascript">
function matchHeight() {
$('.container').css('height',$(window).height);
};
</script>

< div class =“container”>我希望这个容器是用户屏幕分辨率的高度. &LT / DIV&GT

.container { width:100%; height: /* javascript value */ }

帮助将受到高度赞赏！提前致谢.

编辑：我添加了一份完整文档的Fiddle.

解决方法:

你所要求的并不困难.它需要的只是一个很好的JavaScript函数和对HTML代码的一些快速细微更改.

首先,给你的“容器”< div>通过对HTML进行一些快速更改来识别id;

<div class="container" id="container">
I want this container to be the height of the users screen resolution. 
</div>

接下来定义一个引用它的JavaScript变量：

var container = document.getElementById("container");

然后使用我一直使用的这个整洁的函数来使用JavaScript获取屏幕的尺寸：

function resize() {
    // 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
}
container.style.height = viewportheight+"px";
}

请注意,我将container.style.height = viewportheight“px”;在功能中.这意味着每次调整大小();我们将调用浏览器的尺寸并将这些尺寸重新应用到容器< div>.

我们将调用resize();每次页面调整大小时,以及页面首次加载时,都会在正文中使用此HTML：

<body onl oad="resize()" onresize="resize()">

该函数将调整容器的大小< div>到整页高度.如果您对此有疑问,请告诉我,或者有任何问题！

码农公寓

相关文章