爲什麼我的CSS樣式不改變屬性高度？

如果我將「div」元素的寬度設置爲％，它可以正常工作，但是如果將高度設置爲％，我什麼也得不到。只有當我指定像素或EM高度或東西它的工作原理：爲什麼我的CSS樣式不改變屬性高度？

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    </head> 
    <style> 
     div { 
      background-color: aqua; 
      height: 25%; 
      width: 25%; 
      float: left; 
      } 
    </style> 

<body> 
    <div></div> 
</body> 
</html>

這是混淆了我。謝謝。

來源

2017-08-25 Zebrafish

<style> 
    body{ 
     height: 100vh; 
     width: 100vw; 
    } 
    div { 
     background-color: aqua; 
     height: 25%; 
     width: 25%; 
     float: left; 
     } 
</style>

當您設置width或height用％，你必須檢查它的父標籤。

例如，

.parent{ 
    width: 200px; 
    height: 200px; 
} 

.children{ 
    width: 50%; 
    height: 50%; 
}

.children的height和width是100px。

讓我們來看另一個例子。

.parent{ 

} 
.children{ 
    width: 50%; 
    height: 50%; 
}

.children的height和width是0px。

因爲它的父母沒有width和height。

來源

2017-08-25 00:22:13 zynkn

謝謝。我只是想知道什麼指定身體實際上100vh，特別是爲什麼它使div高度接受一個百分比。 – Zebrafish

vh是一個css單位，* always *表示屏幕高度的百分比。 vw是寬度相同的東西。使用100％可以指代不同的事情。如果父級具有相對位置並且子元素具有相對位置，則子元素的100％將指向其父級寬度/高度的100％。不是屏幕寬度。如果父元素沒有可確定的寬度或高度，百分比將不起作用。屏幕總是有一個可確定的寬度高度，所以它的工作原理。 – diopside

潛水將得到其父高度和寬度的25％，所以如果你沒有給身體設置一個特殊的高度或寬度，那麼在你的情況下最多可以爲0px添加一些高度給身體，它會得到樣式

body { 
height:100%; 
padding:0; 
margin:0; 
}

來源

2017-08-25 00:36:25

爲什麼我的CSS樣式不改變屬性高度？

回答

相關問題