精品国产免费观看久久久_久久天天躁狠狠躁夜夜爽_无码人妻少妇久久中文字幕_狠狠做深爱婷婷久久综合一区

網絡建站知識

精準傳達 ? 價值共享

洞悉互聯網前沿資訊,探尋網站營銷規律

查看其它板塊

圖片設置 height 高度 100%無效的解決方法

作者:小諾 | 2020-02-04 23:05 |點擊:

1、問題的發現:div設置height高度為100%卻未生效


  1. <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .contentDiv {
                width: 100%;
                height: 100%;
                background-color: #cccccc;
            }
        </style>
    </head>
    <body>
        <div class="contentDiv"></div>
    </body>
     


查看上面的代碼,結構很簡單,一個div,寬度和高度都設置100%,背景顏色設置了#ccc。

此時想象一下在瀏覽器中應該顯示一個背景顏色為灰色的全屏的div,但是,結果并不是這樣,反而,此時div的高度是0!!!
 

2、問題的解決:

需要給html和body設置高度為100%,此時div設置高度100%才生效,代碼如下
 

  1. <style>
        html, body {
            width: 100%;
            height: 100%;
        }
        ......
    </style>
     

3、問題的原因:

給div設置高度為100%時,是相對于父節點(此時div的父節點是body)設置的,如果此時只設置body的高度為100%,結果發現body高度還是0!!!所以此時再要找到body的父節點(也就是html),也給它設置高度即可解決這個問題。

如沒特殊注明,文章均為狐靈科技原創,轉載請注明?? "圖片設置 height 高度 100%無效的解決方法
多一份免費策劃方案,總有益處。

請直接添加技術總監微信聯系咨詢

網站設計 品牌營銷

多一份參考,總有益處

聯系狐靈科技,免費獲得專屬《策劃方案》及報價

咨詢相關問題或預約面談,可以通過以下方式與我們聯系

業務熱線:15082661954 / 大客戶專線:15523356218