在JAVASCRIPT中将div高度设置为window.innerHeight

Kis*_*ore 11 javascript

我想将元素的div高度设置为浏览器的innerHeight.我不希望在这里发生css或jQuery.它必须通过窗口大小调整动态地改变它的高度.所以我制作了这个剧本,它不像我想的那样工作.

这是我的代码:

window.onload=
window.onresize=function(){
    var left = document.getElementById("left");
    var height = window.innerHeight;
    left.style.height = 'height +('px')';    
}
Run Code Online (Sandbox Code Playgroud)

有人可以纠正我的代码并使其工作.任何帮助将不胜感激.

谢谢.

的jsfiddle

您可以添加height:500px;到左侧元素.看看我想要什么.但我需要适应浏览器的高度.

解决了

//<![CDATA[ 
            function resize()
            {
                var heights = window.innerHeight;
                document.getElementById("left").style.height = heights -50 + "px";
            }
            resize();
            window.onresize = function() {
                resize();
            };
            //]]>  
Run Code Online (Sandbox Code Playgroud)

感谢Thirumalai murugan的回答.

fxd*_*xdx 15

它可以用CSS3完成:

只需使用Viewport-Percentage Lengths设置div高度

div {
    height:100vh;
}
Run Code Online (Sandbox Code Playgroud)

类似的问题和详细信息在这里


Thi*_*gan 14

我发现的问题window.load可能是在DOM元素创建之前被解雇了,你可以删除html,bodycss但是会给一些余量html,body,如果你不想使用css应该在javascript中处理,#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>
Run Code Online (Sandbox Code Playgroud)

更新

的jsfiddle