如果使用HTML5文档类型，为什么不能将div的高度设置为100％？如何获得100％的高度

如果使用HTML5文档类型，为什么不能将div的高度设置为100％？如何获得100％的高度

仅当父元素具有定义的高度（即，不是的值）时

auto

。如果高度为100％，则还必须定义父级的父级高度。这可以一直到

html

根元素。

因此，将

html

和

body

元素的高度

100%

以及您希望首先拥有的元素的每个单个祖先元素设置为

100%

height

。

请看以下示例，使其更清晰：

html, body, .outer, .inner, .content {  height: 100%;  padding: 10px;  margin: 0;  background-color: rgba(255,0,0,.1);  box-sizing: border-box;}<div >  <div >    <div >      Content    </div>  </div></div>

如果我不给100％的钱，这是行不通

height

的-say

html

元素：

body, .outer, .inner, .content {  height: 100%;  padding: 10px;  margin: 0;  background-color: rgba(255,0,0,.1);  box-sizing: border-box;}<div >  <div >    <div >      Content    </div>  </div></div>

… 要么

.inner

html, body, .outer, .content {  height: 100%;  padding: 10px;  margin: 0;  background-color: rgba(255,0,0,.1);  box-sizing: border-box;}<div >  <div >    <div >      Content    </div>  </div></div>