Question

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

这是我的代码：

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

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

谢谢。

jsFIDDLE

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

解决

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

感谢Thirumalai murugan的回答。

Answer 1

可以使用CSS3完成：

使用Viewport-Percentage Lengths

设置div高度

div {
    height:100vh;
}

similar question and detailed info here

Answer 2

问题我发现在创建DOM元素之前window.load可能会被触发，你可以删除html,body css，但这会为html,body提供一些余量，如果你应该在javascript中处理不想使用css，#left css规则仅用于理解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>

更新

JSFIDDLE

Answer 3

window.onload = window.onresize = function () {
    var left = document.getElementById("left");
    var height = window.innerHeight;
    left.style.height = height + "px";
}

你在函数的最后一行有一个错误，现在应该可以正常工作。

Answer 4

我用以下方法解决了我的谷歌地图容器的100％高度：

;-------------------------------------------------------------
GetButtonPress PROC
;
; Prompts the user for button entry 
; Receives: None 
; Returns: A character value to the AL register
; Calls: WriteString, ReadChar
;----------------------------------------------------------------
    mov edx,OFFSET prompt       ;Prompt user for integer entry
    call WriteString
Redo:
    call ReadChar
    cmp al,'1'
    jl Redo
    cmp al,'4'
    jg Redo
    call WriteChar
    ret
GetButtonPress ENDP

more details here

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

4 个答案:

更新