2018/02

高度設(shè)100%無效解決辦法

發(fā)布時(shí)間：2018-02-03 13:32:49

發(fā)布者：565633147

瀏覽量:

相信很多朋友都會(huì)遇到這樣的問題，當(dāng)自己不想設(shè)置一個(gè)div的高度或者不知道它具體高度的時(shí)候，通常都會(huì)設(shè)成：height:auto;但跟多時(shí)候，會(huì)想把它的高度設(shè)置成100%。以此來適應(yīng)不同分辨率情況下的窗口。

當(dāng)我們也實(shí)際那樣操作就會(huì)發(fā)生很奇怪的事情，就像下面看到的，頁面是什么都沒顯示的。

QQ圖片20180203140224.png

明明設(shè)置了height，那么height去哪兒了呢？

這時(shí)候我們需要知道瀏覽器對于高度的計(jì)算方式。事實(shí)上。瀏覽器是不計(jì)算內(nèi)容的高度。除非當(dāng)內(nèi)容超出視窗范圍，它會(huì)出現(xiàn)滾動(dòng)條。換言之，瀏覽器里面的內(nèi)容都是向下堆砌的。是不考慮高度的。

那么，怎么解決當(dāng)height為100%顯示的問題呢？

一定要注意的是當(dāng)我們用百分比做屬性時(shí)，它是有一個(gè)相對的元素。一般叫父元素。

必須先給定父元素一個(gè)高度。

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>