12

我想将元素的 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 的回答。

4

4 回答 4

18

它可以用 CSS3 完成：

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

div {
    height:100vh;
}

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

于 2015-01-11T15:19:51.200 回答
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>

更新

JSFIDDLE

于 2013-07-18T10:16:55.663 回答
4 
window.onload = window.onresize = function () {
    var left = document.getElementById("left");
    var height = window.innerHeight;
    left.style.height = height + "px";
}

你在函数的最后一行出错了，它现在应该可以工作了。

于 2013-07-18T09:58:59.337 回答
0

我解决了我的谷歌地图容器的 100% 高度：

document.getElementById("map-canvas").style.height = document.getElementsByTagName("body")[0].offsetHeight + "px";

更多细节在这里

于 2015-05-28T12:42:54.200 回答