如何實現div的高度100%填充


就我們所以了解的:一個div塊級元素沒有主動為其設置寬度和高度,瀏覽器會為其分配可使用的最大寬度(比如全屏寬度),但是不負責分配高度,塊級元素的高度是由子元素堆砌撐起來的。

例如:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        html,body{
            margin: 0;
            padding: 0;
        }
        .demo{
            width: 100%;
            height: 100%;
            background-color: #D9C666;
        }
    </style>
</head>
<body>
    <div class="demo">
        看看我的高度
    </div>
</body>
</html>

實現效果:

-------------------------------------------------------------------------------------------------------------------------

此時的情況是父元素高度依賴子元素堆砌撐高,因此demo中的{height:100%;}是不起作用的。元素高度百分比需要向上遍歷父標簽要找到一個定值高度才能起作用,如果中途有個height為auto或是沒有設置height屬性,則高度百分比不起作用。

需要找到頂級父元素(即瀏覽器的高度),可以使用js獲取瀏覽器的高度再進行設置,當然亦有簡單的辦法

實現效果:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM