4

我正在开发单页滚动至网页设计，但无法使此代码正常工作。

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

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

这是我希望可变屏幕高度的一个简短示例：

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

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

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

帮助将不胜感激！提前致谢。

编辑：我添加了我完整文档的小提琴。

4

3 回答 3

3

你所要求的一点也不难。它所需要的只是一个不错的 JavaScript 函数和对 HTML 代码的一些快速的小改动。

首先，通过对您的 HTML 进行一些快速更改，给您的“容器”<div>一个 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";输入了函数。这意味着每次resize();调用我们都会更新浏览器的尺寸并将这些尺寸重新应用到容器中<div>。

resize();每次页面调整大小以及页面首次加载时，我们将使用以下 HTML 调用正文中的函数：

<body onload="resize()" onresize="resize()">

该函数会将容器<div>的大小调整为整个页面高度。如果您对此有任何疑问或有任何疑问，请告诉我！

于 2013-01-21T18:02:29.287 回答
1

您不能在 css 中使用 JS 代码。

你可以像这样做你想做的事：

$('.container').height($(window).height());

或者

$('.container').height($(document).height());

无论您想要窗口还是文档高度。

于 2013-01-21T18:01:28.430 回答
0

你不能做以下事情

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

但是，您可以将高度设置为某个值，然后使用jQuery的.css()API 进行更改。

还要确保matchHeight()从内部调用您的函数$(documeent).ready()。

===========================

您可以将您的container班级更改为

.container { position:absolute: width:100%; height: 100%; }

===========================

或者你可以使用css media queries

于 2013-01-21T18:04:17.573 回答