我正在尝试设置 <div>
在 CSS 中达到一定百分比的高度,但它只是保持与其中内容相同的大小。当我删除 <!DOCTYTPE html>
然而,它有效,<div>
根据需要占据整个页面。我想让页面通过验证,我该怎么做?
我在 <div>
上有这个 CSS ,其 ID 为 page
:
#page {
padding: 10px;
background-color: white;
height: 90% !important;
}
最佳答案
I am trying to set a div to a certain percentage height in CSS
什么的百分比?
要设置百分比高度,其父元素 (*) 必须具有明确的高度。这是不言而喻的,因为如果您将高度保留为 auto
,该 block 将采用其内容的高度...但是如果内容本身具有以父级的百分比表示的高度,则您已经使自己有点第 22 条军规。浏览器放弃并仅使用内容高度。
所以 div 的父级必须有一个明确的 height
属性(property)。虽然如果您愿意,该高度也可以是百分比,但这只会将问题提升到一个新的水平。
如果你想让 div 高度成为视口(viewport)高度的百分比,div 的每个祖先,包括 <html>
和 <body>
, 必须有 height: 100%
,所以有一个明确的百分比高度链向下到 div。
(*:或者,如果 div 已定位,则为“包含 block ”,它也是要定位的最近的祖先。)
或者,所有现代浏览器和 IE>=9 都支持相对于视口(viewport)高度 (vh
) 和视口(viewport)宽度 (vw
) 的新 CSS 单位:
div {
height:100vh;
}
请在此处查看 more info .
关于html - 如何在 HTML/CSS 中设置百分比高度值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44072618/