高度佔頁面或佔div百分比無效是什麼情況？

        1.  你曾經說想要 高度佔頁面或佔div百分比無效的問題，相信你也搜尋過了，就是說 需要 設定父親父親一直到祖宗html都必須設定百分比，才有效果。

     一句話：想用百分比設定他的高度，則它的父親中至少有一個是固定高度，不然的話全部父親直到祖宗html（因為html外面就是瀏覽器，它是有高度的）都必須設定上百分比。 當然要排除那些脫離文件流的div,例如position:absolute,fixed，可以認為他們的父級就是瀏覽器，所以height百分比總是有效的，因為瀏覽器的高度是可以直到的啊。

        2. 有時候並不是直接用百分比，可能有部分margin啊，padding啊需要扣除掉，這時候可以用height: calc(100% - 1rem); height: calc(50% - 2px ); 等等，這種情況有效的條件也是必須是第一點說明的，因為它也是用到了height百分比啊。

在現今響應式佈局的要求下，許多能自動調整尺寸的元素能夠做到高寬自適應，如img，透過{width:50%;height:auto;}實現圖片高度跟隨寬度比例調整。

然而，用的最多的標籤一哥Div卻不能做到自動調整（要么從父級繼承，要么自行指定px，要么給百分比！但是這個百分比是根據父級的高度來計算的，根本不是根據元素本身的寬度，那麼就做不到Div的寬高達成一定的比例=-=）。

        要達到此功能（div的高度：寬度=1:1），透過各種加Buff，得知有下列幾種處理方式

#1，直接指定div的寬高+zoom來實現自適應

div{width:50px;heigth:50px;zoom:1.1;}

這樣能達到初步的等寬高div，但是限制太大， PASS！

2，透過js動態判斷div的寬度來設定高度

div{width:50%;}

window.onresize = function(){div.height( div.width);}

也能實現等寬高div，但是總覺得有點彆扭，PASS！

3，透過寬高單位來設定

div{width:20vw;height:20vw;/*20vw為viewport width的20%*/}

但是很多設備不支援這個屬性，相容性太差，PASS！

4，透過float來設定

#aa{background:#aaa;;}
#bb{background:#ddd;;float:left} 
##cc{ background:#eee;;float:right}

##

父親div 

　　

子div

 

子div

 
　　

就是這個用於clear錯誤的

;

能夠讓父級元素aa根據子元素的高度自動改變高度（在子元素裡放置自適應元素）來調整高寬比一致，然而太麻煩，PASS！

以上是高度佔頁面或佔div百分比無效是什麼情況？的詳細內容。更多資訊請關注PHP中文網其他相關文章！