html - 如何在 HTML/CSS 中设置百分比高度值

我正在尝试设置 <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/51410449/