Javascript 使用JS查找屏幕高度，然后通过CSS将其应用于div类_Javascript_Html_Css_Liquid

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

javascript html css

Javascript 使用JS查找屏幕高度，然后通过CSS将其应用于div类,javascript,html,css,liquid,Javascript,Html,Css,Liquid,我正在处理一个网页滚动到webdesign，但无法使此代码正常工作我试图通过JavaScript获得用户的屏幕高度然后我想把这个屏幕高度应用到我的div类中，这样我将始终拥有一个容器，它的大小与用户的屏幕分辨率相同。可以说，这是一种始终适合屏幕的液体设计下面是我希望可变屏幕高度的一个简短示例： <script type="text/javascript"> function matchHeight() { $('.container').css('height',$(windo

我正在处理一个网页滚动到webdesign，但无法使此代码正常工作

我试图通过JavaScript获得用户的屏幕高度

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

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

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

非常感谢您的帮助！提前谢谢

编辑：我已经添加了完整文档的一部分。

您不能在css中使用JS代码

您可以这样做：

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

或

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

您想要的一点也不难。它只需要一个漂亮的JavaScript函数和对HTML代码进行一些快速的小修改

首先，通过对HTML进行一些快速更改，为“容器”

提供一个id

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

然后使用这个整洁的函数，我一直在使用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（）

我们将调用resize（）函数：
<body onload="resize()" onresize="resize()">



该函数将容器的大小调整为整页高度。如果您对此有任何问题，或者有任何问题，请告诉我
 你不能做以下事情
.container { width:100%; height: /* javascript value */ }

但是，您可以将高度设置为某个值，然后使用jQuery
的.css（）
API对其进行修改
还要确保从$（document）.ready（）中调用matchHeight（）
函数
您可以将容器
类更改为
.container { position:absolute: width:100%; height: 100%; }

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

或者你可以使用css媒体查询
做人，使用cssonly@PeterSzymkowski做一个男人，为他提供一个CSS解决方案：）有没有理由认为屏幕的高度可能会超过100%？我尝试了100%的高度。并提供了我的html、正文和.container。没用……首先，非常感谢你的帮助！我将ID应用于我的div，然后将javascript添加到头部。最后，我添加了body onload，并在我的.container css中添加了背景色。如果代码正常工作，并且div被更改为我刚从javascript接收到的高度，那么背景色应该覆盖整个屏幕。但事实并非如此。我不知道我做错了什么。请尝试在container.style.height=viewportheight+“px”之后添加警报类似于警报（视口高度）这样我们就可以看到是否传递了正确的变量值。另外，如果你能提供一个链接到发生这种情况的实际页面，那将非常有帮助，这样我就可以自己看到它了。谢谢哦，伙计，你是新来的，我忘了！StackOverflow上的人会因为你使用pastebin而毁掉你。有一个名为JSFIDLE的很棒的小工具，让您可以立即从HTML、CSS和JavaScript代码中获得结果。你应该用这个来代替：对，我的错！我马上去拿一个。谢谢你的提示。奇怪……我所做的就是删除
并用窗口替换它。onload=resize（）和窗口。onresize=resize（）在JavaScript中，现在它似乎正在工作。在这里查看工作代码：在您的页面上尝试一下，看看它是否也能正常工作？谢谢您的评论。尝试应用这些代码片段，但什么都没做。嘿。谢谢你的评论！我试图避免使用position:absolute。我厌倦了在我下潜之前要测量所有的东西。
<body onload="resize()" onresize="resize()">

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

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

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

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