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

這里我使用的是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();//當(dāng)頁面實(shí)際高度小于可視區(qū)域高度的時(shí)候，將可視區(qū)域高度 賦值給 實(shí)際高度if (divHeight < windowHeight) {if (document.getElementsByClassName('prize-drop')[0]) {document.getElementsByClassName('prize-drop')[0].style.height = windowHeight + 'px';}}},//獲取當(dāng)前頁面實(shí)際高度getPrizeDropHeight() {return document.getElementsByClassName('prize-drop')[0].offsetHeight;},//獲取可視區(qū)域高度getWindowHeight() {return document.documentElement.clientHeight || document.body.clientHeight;},

CSS

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。