javascript,css_js设置高度等于宽度，设置之后宽度会自动变？，javascript,css,html,chrome

js设置高度等于宽度，设置之后宽度会自动变？

做一个正方形的div，宽度设置成80%，然后用js设置高度等于宽度，设置之后发现高度比宽度大一些
浏览器是chrome

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        #foo {
            width: 80%;
        }
    </style>
</head>
<body>
    <div id="foo"></div>
    <script>
        // 这样设置之后宽高如图
        var div = document.getElementById("foo");
        var width = div.offsetWidth;
        div.style.height = width+"px";
    </script>
</body>
</html>

宽度变小了，是不是滚动条出现了？在你打开控制台之后。