最近公司有一个项目，使用vue开发微信公众号，开发过程遇到一个问题，即设计图的整体背景是白色的，但是公众号里默认的背景是浅灰色，如果某个页面高度没能占满一屏，就会露出浅灰色的默认背景，会显得很不协调。 使用单纯的css没能解决这个问题，在网上查了些资料也没发现特别好的方法，最后还是采用了JS解决这个问题。  

document.documentElement.style.backgroundColor = "#fff";
this.screenH = window.screen.availHeight;
this.pageH = document.documentElement.offsetHeight;
if (this.pageH < this.screenH) {
document.documentElement.style.height = this.screenH + "px";
document.documentElement.scrollTop = '0';
} else {
document.documentElement.style.height = 'auto';
document.documentElement.scrollTop = '0';
}

思路是，设置网页背景为白色，比较网页高度和屏幕高度，如果网页高度小于屏幕高度，就把网页高度设成屏幕高度。 Vue虽然不推荐直接操作dom，但是在这个问题中，通过操作DOM能够最简便的解决问题，所以我觉得，该操作DOM的时候还是要用DOM，不要被“Vue中不推荐操作DOM”这句话局限了。  

来自：https://www.cnblogs.com/KlllB/archive/2019/01/03/10215704.html

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/1761