这个问题的出现的原因是希望创建一个正方形的DIV，其高度与视口的高度相等。然而，通过使用纯CSS来实现这个目标并不容易。在给出的代码示例中，使用了一个有趣的技巧，通过设置元素的宽度为100%，然后通过padding-bottom属性设置元素的高度为视口高度的百分比，从而实现正方形的效果。

然而，这种方法并不是完美的解决方案。有人指出这种方法不会将元素的高度最大化以填充视口。另外，也有人指出这个答案并不符合问题的要求，因为问题要求将宽度设置为高度的相反值。

虽然这种方法看起来有点笨拙，但在实践中似乎是有效的。然而，它也有一些限制。有人指出，这种方法无法与Bootstrap框架混合使用。

如果希望根据高度来计算宽度，而不是根据宽度来计算高度，可以参考提供的链接，其中列出了其他使用纯CSS来保持元素纵横比的方法。

通过纯CSS创建一个高度等于视口的正方形DIV的问题在一定程度上是可以解决的，但是并没有一个完美的解决方案。不同的方法适用于不同的需求，需要根据具体情况选择合适的方法。

问题的出现原因：

这个问题的出现是因为需要创建一个正方形的DIV，而且该DIV的高度应该与浏览器窗口的视口高度相等。

解决方法：

解决这个问题可以使用jQuery或纯JavaScript。

使用jQuery的解决方法如下：

$(document).ready(function(){
  var height = $(window).height();
  $('#square').css('height', height);
  $('#square').css('width', height);
});

如果希望将宽度设置为从高度计算出来的值，可以使用以下代码：

var width = (height * 1.2);
$('#square').css('width', width);

然而，当用户禁用JavaScript时，需要优雅地降级处理这个问题，以保证网页的正常显示。

(Square DIV where height is equal to viewport)这个问题的出现的原因是希望创建一个正方形的div元素，使其高度等于视口的高度。解决方法是使用vh单位来设置div元素的高度和宽度，vh单位表示视口高度的1/100。具体代码如下：

body{margin:0;}
div{
    background:gold;
    height:100vh;
    width:100vh;
}

这样设置后，div元素的宽度和高度将等于视口的高度。vh单位的浏览器支持是IE9+。如果视口的宽度小于高度，使用`width: 100vh`可能会将内容移到屏幕外，此时可以使用vmin单位，它是视口宽度和高度中较小的值。这个解决方法比其他CSS解决方案更简洁，而且不需要使用JavaScript。