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，如需轉載請自行聯系原作者