分析div自動適應瀏覽器的高度
前端人員之間有一個普遍存在的問題,如何讓一個div的高度自動延伸到瀏覽視窗100%的高度,在佈局中,我們有時會用到高度自適應,例如,我們定義了一個 div,並且希望它的高度為視窗高度的100% ,那麼我們該如何編寫程式碼呢?用height:100%就可以了。但要注意的是,瀏覽器對css的解析方式有一點差異。我們需要弄清楚100% 到底是誰佔誰的100%,讓我給你另外一種方式來思考HTML,幾乎每一個HTML檔案都有一組容器彼此包含的。因此,在我們的頁面裡面,首先我們有一個<html>容器,其次<body>容器包含在<html>裡,最後才是<div
id=”content”></div>容器包含在裡面。當我們往任何一個容器裡面放置內容的時候,這個容器和包含此容器的父容器盒子都會自動延伸的,從而能容下這些新新增的內容。也就是說,當我們往<div id=”content”></div>容器盒子新增文字內容的時候,這個div容器盒子是自動延伸的,包含這個div容器的父容器盒子(body與html)依次是自動延伸的。 |