Question

鉴于以下测试用例，预期的行为是，在调整浏览器窗口大小时，lightblue元素与红色父元素的大小完全匹配。

<html>
<head>
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"/></script>
    <style type="text/css">
    #viewport{
        width: 100%;
        height: 30%;
        background-color: red;
    }
    #child{
        background-color: lightblue;
    }
    </style>
</head>

<body>
    <div id="viewport"><div id='child'></div></div>
    <script>
        window.addEventListener( 'resize', function(){
            var width = $('#viewport').innerWidth();
            var height = $('#viewport').innerHeight();
            $('#child').css('height', height+'px');
            $('#child').css('width', width+'px');
        });
    </script>
</body>
</html>

chrome 36.0.1985.143上的实际行为有时（特别是在较小的窗口大小），子元素的设置比父元素高5px，和/或宽1px。如果$('#child').css('width', width+'px');被注释掉，问题就会停止。

据报道，Firefox上不会出现此问题。

类似的问题似乎已经在http://thewebivore.com/using-settimeout-win-race-condition-changing-views/上被提起但是我无法通过超时来缓解它＆lt; 10毫秒，这不是一个真正的解决方案。

Answer 1

我已将您的示例代码插入fiddle，我似乎遇到了许多其他问题。

但是，如果我使用vh和vw代替%，我会得到更好的结果：

#viewport {
    width: 100vw;
    height: 30vh;
    background-color: red;
}
#child {
    background-color: lightblue;
}

fiddle here ...

Javascript窗口调整可能的竞争条件

1 个答案: