我們常常在工作中遇到，頁面要設置可視區域都有背景色，但是 實際頁面大小并沒有占滿全屏，這個時候就會很糾結，這里我記錄一下我的做法。

這里我使用的是vue：

HTML

<template><div class="prize-drop"><div class="prize-drop-content">88888</div></div> </template>

JS

mounted: function() {this.setColor();},methods: {setColor() {let divHeight = this.getPrizeDropHeight();let windowHeight = this.getWindowHeight();//當頁面實際高度小于可視區域高度的時候，將可視區域高度 賦值給 實際高度if (divHeight < windowHeight) {if (document.getElementsByClassName('prize-drop')[0]) {document.getElementsByClassName('prize-drop')[0].style.height = windowHeight + 'px';}}},//獲取當前頁面實際高度getPrizeDropHeight() {return document.getElementsByClassName('prize-drop')[0].offsetHeight;},//獲取可視區域高度getWindowHeight() {return document.documentElement.clientHeight || document.body.clientHeight;},

CSS

.prize-drop {background: #1c2239ff; }

總結

以上是生活随笔為你收集整理的设置页面满屏背景色的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。