相信很多朋友都會遇到這樣的問題,當自己不想設(shè)置一個div的高度或者不知道它具體高度的時候,通常都會設(shè)成:height:auto;但跟多時候,會想把它的高度設(shè)置成100%。以此來適應(yīng)不同分辨率情況下的窗口。
當我們也實際那樣操作就會發(fā)生很奇怪的事情,就像下面看到的,頁面是什么都沒顯示的。
明明設(shè)置了height,那么height去哪兒了呢?
這時候我們需要知道瀏覽器對于高度的計算方式。事實上。瀏覽器是不計算內(nèi)容的高度。除非當內(nèi)容超出視窗范圍,它會出現(xiàn)滾動條。換言之,瀏覽器里面的內(nèi)容都是向下堆砌的。是不考慮高度的。
那么,怎么解決當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>
這樣的話,就可以咯!
關(guān)鍵詞: