相信很多朋友都會遇到這樣的問題，當自己不想設置一個div的高度或者不知道它具體高度的時候，通常都會設成：height:auto;但跟多時候，會想把它的高度設置成100%。以此來適應不同分辨率情況下的窗口。
當我們也實際那樣操作就會發生很奇怪的事情，就像下面看到的，頁面是什么都沒顯示的。
明明設置了height，那么height去哪兒了呢？
這時候我們需要知道瀏覽器對于高度的計算方式。事實上。瀏覽器是不計算內容的高度。除非當內容超出視窗范圍，它會出現滾動條。換言之，瀏覽器里面的內容都是向下堆砌的。是不考慮高度的。
那么，怎么解決當height為100%顯示的問題呢？
一定要注意的是當我們用百分比做屬性時，它是有一個相對的元素。一般叫父元素。
必須先給定父元素一個高度。
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文匯軟件title>
<style type="text/css">
body,html{width:100%;height: 100%;margin: 0 auto;}
div{width: 20%;height: 100%;margin: 0 auto;background-color: #de2829;}
style>
head>
<body>
<div>div>
body>
html>
這樣的話，就可以咯!
下一篇： 新手如何學習css
關鍵詞:
