vue中設置height:100%無效的問題及解決方法

在App.vue中設置height: 100%;是無效的，在chrome的Elements中發現height仍然是0px

設置高度100%時，div的高度會等同於其父元素的高度。而上面中id爲app的div（vue掛載的div）的父節點是body標籤，body標籤的父節點是html標籤。在默認情況下html和body標籤的高度爲auto，而瀏覽器是不會自動給標籤添加高度的，所以html和body標籤就爲0，自然子div的高度設置爲100%就不起作用了。

此時應該在App.vue文件style中添加如下代碼：

<template>
	<!-- test.vue -->
	<view class="content">
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
 
			}
		},
		onLoad() {
 
		},
		methods: {
 
		}
	}
</script>
 
<style lang="less">
	html,body{
		height: 100%;
	}
	.content {
		background-image: url('http://seopic.699pic.com/photo/50055/5642.jpg_wh1200.jpg');//網絡圖片
		height: 100%;
		background-size: 100% 100%;
	}
</style>

你是技術宅麼？那就加入我們吧~本博主不一定長期在線，可以進羣大家一起解決問題~

歡迎加入 CSDN技術交流羣2：（點擊即可加羣）QQ羣:456543087

               CSDN技術交流羣(已滿員)：（點擊即可加羣）QQ羣:681223095。  

商務合作@羣主，謝謝！