例子: <template> <div class="finish-wrap"> <div class="finish-header"> <div class="finish-img"> </div> </div> <div class="finish-tip"> 支付成功 </div> <div class="finish-footer"> <router-link to="/">學車所需資料</router-link> <span> <router-link to="/">學車考照流程</router-link> </span> </div> </div> </template>
1.如果直接在css中設定body的background-color,會導緻其他頁面的背景色響應改變,是以不可取; 2.如上面例子如果設定.finish-wrap的背景色以及高度為100%時,會發現隻是一部分的背景色發現改變,卻不能使整個螢幕背景色變化; 原因:打開app.vue,你會看到 <template> <div> <router-view></router-view> </div> </template> 原因就是這裡還有一層div,是以你改變的不是最外層的div背景色,但是你有不能修改這裡,是以:
解決方法: 我們要讓.finish-wrap脫離文檔流,為他添加個fixed屬性,最後結果: .finish-wrap background-color rgb(255,255,255) height: 100% position: fixed width: 100%