Css 高度100%div延伸到窗口大小_Css_Html

Css 高度100%div延伸到窗口大小

css html

Css 高度100%div延伸到窗口大小,css,html,Css,Html,Html: 风格：我已经像上面一样设置了这个简单的页面，试图发现为什么它会以这种方式呈现唯一的css属性是在“test”类的高度上设置的这将导致将两个div设置为视口的高度。如果我更改窗口的大小，两个div也将调整大小奇怪的是，当在我的屏幕上完全最大化时，两个div的高度都是939px，身体的高度是1878px 即使div的高度设置为包含元素的100% 谁能解释一下css引擎处理这些信息的顺序，并得出每个div的视口大小吗？因为您将高度设置为100%，css获得浏览器窗口高度并应用于每个

Html:

风格：

我已经像上面一样设置了这个简单的页面，试图发现为什么它会以这种方式呈现

唯一的css属性是在“test”类的高度上设置的

这将导致将两个div设置为视口的高度。如果我更改窗口的大小，两个div也将调整大小

奇怪的是，当在我的屏幕上完全最大化时，两个div的高度都是939px，身体的高度是1878px

即使div的高度设置为包含元素的100%

谁能解释一下css引擎处理这些信息的顺序，并得出每个div的视口大小吗？

因为您将高度设置为100%，css获得浏览器窗口高度并应用于每个元素，如果您需要设置一个div显示为窗口高度的一半，仅定义高度：50%

此处链接必须有助于您理解这一点

如果您的div包含已设置高度的包装，则内部div将在应用100%高度时设置为包装，但在您的情况下，您没有设置高度，因此它将变为窗口高度100%。您将从这两个演示中清楚地看到

两个.test div都由一个div包装

此外，尝试在css中使用此选项，以确保主体是100%

为什么它失败了

你已经为我设定了高度

以百分比表示…这意味着它将是其包含元素的100%，也就是说，…所以您也必须设置100%的div高度

请记住，无论何时以百分比形式设置维度，都会将其视为相对于div的父元素

因此，要将.test设置为100%，请将父div和body也设置为100%

勾选这些小提琴，以便更好地理解：

<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>

html,body{
    min-height:100%; 
    height:100%; 
}

<div class="test"> test</div>