我试图<div>
在CSS中将a设置为一定的百分比高度,但它的大小与其中的内容相同。<!DOCTYTPE html>
但是,当我删除HTML 5时,它可以工作,<div>
并按需要占用整个页面。我希望页面进行验证,那该怎么办?
我在上有此CSS <div>
,其ID为page
:
#page {
padding: 10px;
background-color: white;
height: 90% !important;
}
我试图<div>
在CSS中将a设置为一定的百分比高度,但它的大小与其中的内容相同。<!DOCTYTPE html>
但是,当我删除HTML 5时,它可以工作,<div>
并按需要占用整个页面。我希望页面进行验证,那该怎么办?
我在上有此CSS <div>
,其ID为page
:
#page {
padding: 10px;
background-color: white;
height: 90% !important;
}
Answers:
我正在尝试在CSS中将div设置为某个百分比高度
百分比是多少?
要设置百分比高度,其父元素(*)必须具有明确的高度。这是不言而喻的,如果您将height保留为auto
,则该块将获取其内容的高度...但是,如果内容本身的高度以父级的百分比表示,则您会使自己有点捕获22.浏览器放弃了,只使用内容的高度。
因此div的父级必须具有显式height
属性。如果您愿意的话,这个高度也可以是一个百分比,但这只会使问题上移。
如果要将div高度设置为视口高度的百分比,则div的每个祖先(包括<html>
和<body>
)都必须具有height: 100%
,因此存在一个明确的百分比高度下降到div的链。
(*:或者,如果div被定位,则是“包含块”,它也是要定位的最接近的祖先。)
另外,相对于视口高度(vh
)和视口宽度(vw
),所有现代浏览器和IE> = 9都支持新的CSS单位:
div {
height:100vh;
}
有关更多信息,请参见此处。
bobince的答案将让您知道在哪种情况下“高度:XX%;” 会或不会工作。
如果要创建一个具有固定比例(高度:其自身宽度的%)的元素,最好的方法是使用来有效地设置高度padding-bottom
。正方形示例:
<div class="square-container">
<div class="square-content">
<!-- put your content in here -->
</div>
</div>
.square-container { /* any display: block; element */
position: relative;
height: 0;
padding-bottom: 100%; /* of parent width */
}
.square-content {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
方形容器将仅由填充材料制成,并且内容将扩展为填充容器。2009年关于此主题的长篇文章:http : //alistapart.com/article/creating-intrinsic-ratios-for-video
您可以使用100vw / 100vh
。CSS3为我们提供了相对于视口的单位。100vw表示视口宽度的100%。100vh; 高度的100%。
<div style="display:flex; justify-content: space-between;background-color: lightyellow; width:100%; height:85vh">
<div style="width:70%; height: 100%; border: 2px dashed red"></div>
<div style="width:30%; height: 100%; border: 2px dashed red"></div>
</div>
height
带有百分比值的CSS属性的简单明了的解释:stackoverflow.com/a/31728799/3597276