使用JS查找屏幕高度，然后通过CSS将其应用于div类 [英] Using JS to find screen height, then apply it to a div class through CSS
问题描述
我正在进行单页滚动到网页设计，但无法使此代码生效。
I'm working on a single-page scroll-to webdesign, and can't get this code to work.
我要做的是通过JavaScript获取用户的屏幕高度。
What I'm trying to do is get the screen height of the user through JavaScript.
然后我想将此屏幕高度应用于我的div类，这样我将始终拥有一个容器用户屏幕分辨率的大小。可以说，液体设计总是适合屏幕。
Then I want to apply this screen height to my div class, so that I'll always have a container that is the size of the users screen resolution. A liquid design that always fits the screen, so to speak.
以下是我想要变量屏幕高度的简短示例：
Here's a short example of where I want the variable screen height to be:
<script type="text/javascript">
function matchHeight() {
$('.container').css('height',$(window).height);
};
</script>
< div class =container>我希望这个容器是用户屏幕分辨率的高度。 < / div>
.container { width:100%; height: /* javascript value */ }
帮助将受到高度赞赏！提前致谢。
Help will be highly appreciated! Thanks in advance.
编辑：我添加了我的完整文件的小提琴。
推荐答案
你所要求的并不困难。它需要的只是一个很好的JavaScript函数和对HTML代码的一些快速细微更改。
What you are asking for is not difficult at all. All it requires is one nice JavaScript function and a few quick minor changes to your HTML code.
首先，通过对HTML进行一些快速更改，为您的容器< div> 提供ID;
First, give your "container" <div> an id by making some quick changes to your HTML;
<div class="container" id="container">
I want this container to be the height of the users screen resolution.
</div>
接下来定义一个引用它的JavaScript变量：
Next define a JavaScript variable that refers to it:
var container = document.getElementById("container");
然后使用我一直使用的这个整洁的函数来获取使用JavaScript的屏幕尺寸：
Then use this neat function that I use all the time to get the dimensions of the screen using 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; 在函数中。这意味着每次调用 resize（）; 时，我们都会更新浏览器的尺寸并将这些尺寸重新应用到容器< div> 。
Notice that I put container.style.height = viewportheight+"px"; in the function. This means that every time resize(); is called we will update the dimensions of the browser and reapply those dimensions to the container <div>.
我们每次都会在身体中调用 resize（）; 函数页面调整大小，以及页面首次加载时，使用此HTML：
We will call the resize(); function in the body every time the page resizes, as well as when the page first loads, using this HTML:
<body onload="resize()" onresize="resize()">
该功能将调整容器的大小< div> 到整页高度。如果您对此有任何疑问，请告诉我，或者有任何问题！
The function will resize the container <div> to the full page height. Let me know if you have problems with this, or have any questions!
这篇关于使用JS查找屏幕高度，然后通过CSS将其应用于div类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
