我试图在 CSS 中将 <div> 设置为某个百分比的高度，但它只是与其中的内容保持相同的大小。然而，当我删除 HTML 5 <!DOCTYTPE html> 时，它可以工作，<div> 根据需要占据整个页面。我想要页面验证，那我该怎么办？
我在 <div> 上有这个 CSS，它的 ID 为 page:
#page {
padding: 10px;
background-color: white;
height: 90% !important;
}
最佳答案
什么百分比？
要设置百分比高度，其父元素 (*) 必须具有明确的高度。这是不言而喻的，因为如果您将 height 保留为 auto ，则块将采用其内容的高度... little Catch 22。浏览器放弃，只使用内容高度。
所以 div 的父级必须有一个显式的 height 属性。如果您愿意，该高度也可以是百分比，但这只会将问题提升到一个新的水平。
如果要使 div 高度成为视口(viewport)高度的百分比，则 div 的每个祖先，包括 <html> 和 <body> ，都必须具有 height: 100% ，因此有一个向下明确百分比高度的链。
(*:或者，如果 div 已定位，则为“包含块”，它也是要定位的最近的祖先。)
或者，所有现代浏览器和 IE>=9 都支持相对于视口(viewport)高度( vh )和视口(viewport)宽度( vw )的新 CSS 单位:
div {
height:100vh;
}
请参阅此处了解 more info 。
关于html - 百分比高度 HTML 5/CSS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/1622027/