gpt4 book ai didi

css - 高度 100% 的 div 延伸到窗口大小

转载 作者:行者123 更新时间:2023-11-28 11:25:21 26 4
gpt4 key购买 nike

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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com