CSS-div高度100%设置问题

div常用的属性width和height，有的时候如果我们需要让div的高度是整个屏幕的高度，设置height：100%发现并没有什么作用，并不是这样设置不对，而是w3c规范中关于百分比的设置是相对于父元素的，如下所示:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<code>&lt;!DOCTYPE html&gt;</code>

<code>&lt;html lang=</code><code>"en"</code><code>&gt;</code>

<code>&lt;head&gt;</code>

<code>    </code><code>&lt;meta charset=</code><code>"UTF-8"</code><code>&gt;</code>

<code>    </code><code>&lt;title&gt;博客园-FlyElephant&lt;/title&gt;</code>

<code>    </code><code>&lt;style type=</code><code>"text/css"</code><code>&gt;</code>

<code>    </code><code>.parent {</code>

<code>        </code><code>background: red;</code>

<code>        </code><code>height: 100%;</code>

<code>    </code><code>}</code>

<code>    </code><code>&lt;/style&gt;</code>

<code>&lt;/head&gt;</code>

<code>&lt;body&gt;</code>

<code>    </code><code>&lt;div </code><code>class</code><code>=</code><code>"parent"</code><code>&gt;</code>

<code>    </code><code>博客园-FlyElephant</code>

<code>    </code><code>&lt;/div&gt;</code>

<code>&lt;/body&gt;</code>

<code>&lt;/html&gt;</code>

发现div的高度只是文字的高度，如果需要让div铺满整个屏幕，我们需要设置一下父级元素的高度，也就是html和body:

<code>html,body {</code>

<code>    </code><code>height: 100%;</code>

<code>    </code><code>padding: 0;</code>

<code>    </code><code>margin: 0;</code>

<code>}</code>

高度是相对于父级元素的，但是html级元素默认宽度是100%，即整行~

本文转自Fly_Elephant博客园博客，原文链接：http://www.cnblogs.com/xiaofeixiang/p/4970172.html，如需转载请自行联系原作者