高度百分比HTML 5 / CSS

小编典典

html

我试图<div>在CSS 中将a设置为一定的百分比高度，但它的大小与其中的内容相同。<!DOCTYTPE html>但是，当我删除HTML 5
时，它可以工作，<div>并按需要占用整个页面。我希望页面进行验证，那我该怎么办？

我在上有此CSS <div>，其ID为page：

#page {
    padding: 10px;
    background-color: white;
    height: 90% !important;
}

阅读 579

2020-05-10

共1个答案

小编典典

我正在尝试在CSS中将div设置为某个百分比高度

百分比是多少？

要设置百分比高度，其父元素（*）必须具有明确的高度。这是不言而喻的，如果您将height保留为auto，则该块将获取其内容的高度…但是，如果内容本身的高度以父级的百分比表示，则您会使自己有点捕获22.浏览器放弃了，只使用内容的高度。

因此div的父级必须具有显式height属性。如果您愿意的话，这个高度也可以是一个百分比，但这只会使问题上移。

如果要将div高度设置为视口高度的百分比，则div的每个祖先（包括<html>和<body>）都必须具有height:100%，因此存在一个明确的百分比高度下降到div的链。

（*：或者，如果div被定位，则是“包含块”，它也是要定位的最接近的祖先。）

另外，相对于视口高度（vh）和视口宽度（vw），所有现代浏览器和IE> = 9都支持新的CSS单位：

div {
    height:100vh; 
}

2020-05-10