linear-gradient在firefox里的0高度

使用linear-gradient呈现多彩背景时，如果DOM中的元素不够多，body的高度小于窗口的高度，在firefox中会出现背景色没有铺满整个窗口的情况，导致背景色多层重复出现。

例如，整个body空无一物的时候，这是一般的理想情况：

但在firefox中是这样的：

 

此时特别简单地，把html和css的height设为100%，问题立刻就解决了。

但另一个问题来了，如果之后dom中的元素动态地有发生变化，使得body的内容总高度反超了浏览器的窗口高度，linear-gradient的平铺高度却不会随之变化，而是局限在原来的浏览器窗口的高度，所以此时下拉滚动条就会看到...

 

所以，将html和body设为100%并不是一个美妙的解决办法。

接着想到的是，那就在一个setInterval中不断地检测body的高度是否小于DOM的高度，小于就更新body的高度：

setInterval(function() {
	if ($("body").height() < $(document).height())
		$("body").height($(document).height());
});

这样想起来似乎是可行的，但实际发现，这样做后body的高度会持续不断地在增大，滚动条越来越细...

调试发现，每次body变大到document的高度后，DOM的高度会立刻增大一点...

于是就在这里卡了许久，不断地调试看了其他许多的高度clientHeight、offsetHeight、scrollHeight等的不同之处也无解，忽然想到会不会用html就不一样了：

setInterval(function() {
	if ($("html").height() < $(document).height())
		$("html").height($(document).height());
});

惊喜地发现窗口不会不断增大了，linear-gradient的效果也完美地平铺着，解决了！

 

原来是因为浏览器默认情况下body是有边距存在的，所以每次body变为DOM的高度时，整个DOM因为还有body的边距就必须跟着增大，而使用html就不会。

所以另外地，如果把body的css设为：

body {
    outline: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

此时在setInterval中使用body判断，也可以完美解决了~