我试图将<div>设置为CSS中的某个百分比高度，但它只是保持与它内部内容相同的大小。当我删除HTML 5 <!DOCTYTPE html>然而，它的工作，<div>占用整个页面所需的。我想让页面进行验证，那么我应该怎么做?
我在<div>上有这样的CSS，它的ID是page:
#page {
padding: 10px;
background-color: white;
height: 90% !important;
}
当前回答
有时，您可能希望有条件地设置div的高度，例如当整个内容小于屏幕高度时。将所有父元素设置为100%将在内容大于屏幕大小时切断内容。
所以，解决这个问题的方法是设置最小高度:
继续让父元素自动调整它们的高度 然后在主div中，用100vh(视口单位)减去页眉和页脚div的像素大小。在css中，像这样:
Min-height: calc(100vh - 246px);
100vh是屏幕的全长，减去周围的div。 通过设置最小高度而不是高度，比屏幕长的内容将继续流动，而不是被切断。
其他回答
你可以用100vw / 100vh。CSS3给了我们视口相关的单元。100vw表示视口宽度的100%。100 vh;高度的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>
为了使用percentage(%)，必须定义其父元素的%。如果你使用body{height: 100%}，它将不起作用，因为它的父元素在高度上没有百分比。在这种情况下，为了计算身体高度你必须在html{height:100%}中添加这个
在其他情况下，为了摆脱定义父母百分比，你可以使用
身体{高度:100 vh}
Vh代表视口高度
有时，您可能希望有条件地设置div的高度，例如当整个内容小于屏幕高度时。将所有父元素设置为100%将在内容大于屏幕大小时切断内容。
所以，解决这个问题的方法是设置最小高度:
继续让父元素自动调整它们的高度 然后在主div中，用100vh(视口单位)减去页眉和页脚div的像素大小。在css中，像这样:
Min-height: calc(100vh - 246px);
100vh是屏幕的全长，减去周围的div。 通过设置最小高度而不是高度，比屏幕长的内容将继续流动，而不是被切断。
有了新的CSS大小属性，你可以不用在父节点上设置精确的高度。新的block-size和inline-size属性可以这样使用:
<!DOCTYPE html> <style> #parent { border: 1px dotted gray; height: auto; /* auto values */ width: auto; } #wrapper { background-color: violet; writing-mode: vertical-lr; block-size: 30%; inline-size: 70%; } #child { background-color: wheat; writing-mode: horizontal-tb; width: 30%; /* set to 100% if you don't want to expose wrapper */ height: 70%; /* none of the parent has exact height set */ } </style> <body> <div id=parent> <div id=wrapper> <div id=child>Lorem ipsum dollar...</div>
在全页模式下调整浏览器窗口的大小。我认为值是相对于视口的高度和宽度。 更多信息请参考:https://www.w3.org/TR/css-sizing-3/ 几乎所有浏览器都支持它:https://caniuse.com/?search=inline-size
你需要在<html>和<body>元素上设置高度;否则，它们只会大到足以容纳内容。例如:
<！DOCTYPE html > <title> 100% width和height的示例 <时尚> Html, body {height: 100%;保证金:0;｝ Div{高度:100%;宽度:100%;背景:红色;｝ > < /风格 < div > < / div >
