Question

说我有以下内容：

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

当我调整屏幕大小时，它将80％的比例保持在某一点，然后它会断开并停止在屏幕高度的80％处。幕后到底发生了什么？

Answer 1

这是一个相对复杂的问题，称为“盒子大小”。

关于它的精彩读物会回答你关于css-trick的问题：http://css-tricks.com/international-box-sizing-awareness-day/

从本质上讲，在你的情况下发生的事情是，margin-top优先。当你有50个像素的总高度，10个被删除，80％的50个将是40 - 刚好够了。让它变得更小，80％将变成“剩下的一切”

Answer 2

如果使用％，则必须设置最小尺寸。

示例宽度：80％;最小宽度：1200px;

当您缩放或小于1200px的屏幕时，它会修复元素和1200px，而不会像这样发生在屏幕上。

希望这有助于= D

Answer 3

```
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; }