將保證金應用於CSS百分比時會發生什麼？

html, body { height: 100%; } 
<div style="height:80%;margin-top:10px;">test</div>

正如我調整屏幕上，它保持了80％的比例到某一點，然後它打破並停止作爲屏幕的高度的80％。幕後究竟發生了什麼？

2014-04-06 Allison A

這是一個相對複雜的問題，稱爲「盒子大小」。

有關於它的一個夢幻般的閱讀會回答你的CSS-技巧問題：http://css-tricks.com/international-box-sizing-awareness-day/

從本質上說，什麼是你的情況下發生的，是在上邊距優先。當你有50個像素的總高度時，10個被移除，50箇中的80％將是40個 - 剛夠。使它更小，80％將代替「剩下的一切」

2014-04-06 20:56:01

如果使用％，則必須設置最小大小。

示例寬度：80％; min-width：1200px;

當你放大或小於1200px的屏幕時，它修復了元素和1200px，不會像這樣發生在屏幕上。

希望這有助於= d

2014-04-06 20:56:31 Dexxtz

的OP正在談論高度。 –

```
html { height: 100%; } 
```
使得<html>有充分窗口的高度。
```
body { height: 100%; } 
```
使得<body>具有<html> 100％的高度。注意一些瀏覽器在其默認的樣式表使用
```
body { margin: 8px; } 
```
，所以<body>會溢出窗口，因爲那些利潤率不height: 100%包括在內。
```
div { height:80%; margin-top:10px; } 
```
使得<div>具有<html> 80％的高度，並將上邊距（額外的高度）的10px。

如果你想那些10px被列入80%，你可以使用calc()：

div { height:calc(80%-10px); margin-top:10px; }

或使用box-sizing與padding代替margin：

div { height:80%; padding-top:10px; box-sizing: border-box; }

2014-04-06 20:59:17 Oriol

即使沒有'body {margin：8px}'，我會補充說，''會因爲大多數瀏覽器的原始邊緣而溢出。 –

@Zakariadza這就是我說的：'body {margin：8px; }'是''（在Firefox中）的默認頁邊距。 – Oriol

哎呀，我沒注意到那句話:) –

回答