HTML :
<html>
<head>
</head>
<body>
<div>
<div class="test"> test</div>
<br />
<div class="test"> test</div>
</div>
</body>
</html>
风格:
<style>
.test{
height:100%;
background-color:red;
}
</style>
我已经按照上面的方式设置了这个简单的页面，以尝试发现它以这种方式呈现的原因。
唯一的 css 属性设置在“测试”类的高度上。
它导致两个 div 被设置为视口(viewport)的高度。如果我改变窗口的大小，两个 div 也会调整大小。
奇怪的是，当在我的屏幕上完全最大化时，两个 div 的高度都是 939px，body 的高度是 1878px。
即使将 div 的高度设置为包含元素的 100%
谁能解释一下 css 引擎处理这些信息的顺序，以及为每个 div 获取视口(viewport)大小的结果？
最佳答案
因为你设置了100%的高度，css获取你的浏览器窗口高度并应用到每个元素，如果你需要设置一个div显示在半个窗口高度，定义height: 50%即可;
这里的链接一定能帮助你理解这个http://www.w3.org/wiki/CSS/Properties/height
关于css - 高度 100% 的 div 延伸到窗口大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21373763/