高度百分比HTML 5 / CSS

我试图<div>在CSS 中将a设置为一定的百分比高度,但它的大小与其中的内容相同。<!DOCTYTPE html>但是,当我删除HTML 5

时,它可以工作,<div>并按需要占用整个页面。我希望页面进行验证,那我该怎么办?

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

#page {

padding: 10px;

background-color: white;

height: 90% !important;

}

回答:

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

百分比是多少?

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

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

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

(*:或者,如果div被定位,则是“包含块”,它也是要定位的最接近的祖先。)

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

div {

height:100vh;

}

以上是 高度百分比HTML 5 / CSS 的全部内容, 来源链接: utcz.com/qa/417842.html

回到顶部