javascript JAVASCRIPT中设置div高度为window.innerHeight
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17720202/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set div height to window.innerHeight in JAVASCRIPT
提问by Kishore
I wanted to set the div height of element to innerHeight of the browser. I dont want css or jQuery to take place here. It has to change its height dynamically with window resize. So i made this script and its not working as i thought.
我想将元素的 div 高度设置为浏览器的innerHeight。我不想在这里使用 css 或 jQuery。它必须通过调整窗口大小来动态改变其高度。所以我制作了这个脚本，但它并没有像我想象的那样工作。
Here is my code:
这是我的代码：
window.onload=
window.onresize=function(){
var left = document.getElementById("left");
var height = window.innerHeight;
left.style.height = 'height +('px')';
}
Can someone correct my code and make it work. Any help will be appreciated.
有人可以更正我的代码并使其工作。任何帮助将不胜感激。
Thank You.
谢谢。
You can add height:500px;to the left element. and see what i want. But i need to fit the browser height.
您可以添加height:500px;到左侧元素。看看我想要什么。但我需要适应浏览器的高度。
SOLVED
解决了
//<![CDATA[
function resize()
{
var heights = window.innerHeight;
document.getElementById("left").style.height = heights -50 + "px";
}
resize();
window.onresize = function() {
resize();
};
//]]>
Thanks to Thirumalai murugan's answer.
感谢 Thirumalai murugan 的回答。
回答by fxdx
it can be done with CSS3:
它可以用 CSS3 来完成：
just set div heigth using Viewport-Percentage Lengths
只需使用 Viewport-Percentage Lengths 设置 div heigth
div {
height:100vh;
}
回答by Thirumalai murugan
Problem I have found is window.loadmay fired before DOM element created, you can remove html,bodycss but that will give some margin to html,body, that should be handle in javascript if you don't want to use the css, #leftcss rule is used only to understand the div height
问题我发现是window.load可以的DOM元素创建之前被炒了，你可以删除html,body的CSS，但将给予一定的裕度html,body，这应该是在JavaScript处理，如果你不想使用CSS，#leftCSS规则仅用于了解DIV高度
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Thirumalai-Window size</title>
<style type="text/css">
#left{width:200px;background:red;}
#inner{height:100%;overflow-y:scroll;}
html,body{margin: 0px;}
</style>
</head>
<body>
<div id="left"></div>
<script type="text/javascript">//<![CDATA[
function resize()
{
var heights = window.innerHeight;
document.getElementById("left").style.height = heights + "px";
}
resize();
window.onresize = function() {
resize();
};
//]]>
</script>
</body>
</html>
update
更新
回答by adamse
window.onload = window.onresize = function () {
var left = document.getElementById("left");
var height = window.innerHeight;
left.style.height = height + "px";
}
You had an error in last line of the function, it should work now.
您在函数的最后一行出错，它现在应该可以工作了。
回答by augusto
I solved the 100% height for my google map container with:
我解决了我的谷歌地图容器的 100% 高度：
document.getElementById("map-canvas").style.height = document.getElementsByTagName("body")[0].offsetHeight + "px";
