我试图在CSS中将<div>设置为某个百分比高度，但它仍然与其中的内容大小相同。当我删除HTML 5 <!DOCTYTPE html>然而，它工作，<div>按需要占用整个页面。我希望页面验证，所以我该怎么办？
我在<div>上有这个CSS，其ID为page：
#page {
padding: 10px;
background-color: white;
height: 90% !important;
}
我试图在CSS中将div设置为某个百分比高度
什么的百分比？
要设置百分比高度，其父元素（*）必须具有显式高度。这是相当不言而喻的，因为如果你将高度保持为auto，那么该块将占据其内容的高度...但是如果内容本身具有以父母的百分比表示的高度，那么你自己就是little Catch 22.浏览器放弃并仅使用内容高度。
因此div的父级必须具有明确的height属性。虽然如果你想要的话，这个高度也可以是一个百分比，这只会将问题提升到一个新的水平。
如果你想让div高度占视口高度的百分比，div的每个祖先，包括<html>和<body>，都必须有height: 100%，所以有一个明确的百分比高度链到div。
（*：或者，如果div被定位，'包含块'，也是最近的祖先也被定位。）
或者，所有现代浏览器和IE> = 9都支持相对于视口高度（vh）和视口宽度（vw）的新CSS单位：
div {
height:100vh;
}
在这里查看more info。
你需要在<html>和<body>元素上设置高度;否则，它们只会大到足以容纳内容。 For example：
<!DOCTYPE html>
<title>Example of 100% width and height</title>
<style>
html, body { height: 100%; margin: 0; }
div { height: 100%; width: 100%; background: red; }
</style>
<div></div>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>
有时，您可能希望有条件地设置div的高度，例如当整个内容小于屏幕的高度时。将所有父元素设置为100％将在内容长于屏幕大小时切断内容。
所以，解决这个问题的方法是设置最小高度：
继续让父元素自动调整它们的高度然后在主div中，从100vh（视口单位）中减去页眉和页脚div的像素大小。在css中，类似于：
最小高度：计算（100vh-246px）;
100vh是屏幕的全长，减去周围的div。通过设置最小高度而不是高度，长于屏幕的内容将继续流动，而不是被切断。
嗨！要使用百分比（％），您必须定义父元素的百分比。如果你使用body {height：100％}它将不起作用，因为它的父级没有高度百分比。在这种情况下，为了达到身高，你必须在html {height：100％}中添加它
在其他情况下，摆脱你可以使用的定义父百分比
体{高度：100vh}
vh代表视口高度
我认为这有帮助