1. 程式人生 > >CSS中height 100%高度無效的原理解析

CSS中height 100%高度無效的原理解析

我們在body中定義一個div設定 width:100%;height:100%;background-color: #666666;用F12檢視,發現div並沒有鋪滿全屏,那麼我們來解析下原因:

在css中因為父元素沒高度,父元素的父元素也沒高度,所以div也就沒有高度,簡單來說,塊級元素的基本尺寸都是從父類元素繼承過來的

div的父元素是body,我們檢視body元素高度,發現也是0,那是因為body的父元素html沒有高度,如果想要div,那麼父元素body必須有高度,那麼html必須設定高度:

            html,body{
				height: 100%;
			}
			.app{
				width: 100%;
				height: 100%;
				background-color: #666666;
			}