我试图将<div>设置为CSS中的某个百分比高度，但它只是保持与它内部内容相同的大小。当我删除HTML 5 <!DOCTYTPE html>然而，它的工作，<div>占用整个页面所需的。我想让页面进行验证，那么我应该怎么做?
我在<div>上有这样的CSS，它的ID是page:
#page {
padding: 10px;
background-color: white;
height: 90% !important;
}
当前回答
有了新的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
其他回答
bobince的答案会让你知道在哪些情况下“height: XX%;”是有效的还是无效的。
如果你想创建一个具有固定比例(高度:自身宽度的%)的元素，请使用aspect-ratio属性。确保没有显式地在元素上设置height以使其工作。https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
.square {
width: 100%;
height: unset;
aspect-ratio: 1 / 1;
}
从历史上看，做到这一点的最好方法是使用填充底部来设置高度。正方形的例子:
<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
为了使用percentage(%)，必须定义其父元素的%。如果你使用body{height: 100%}，它将不起作用，因为它的父元素在高度上没有百分比。在这种情况下，为了计算身体高度你必须在html{height:100%}中添加这个
在其他情况下，为了摆脱定义父母百分比，你可以使用
身体{高度:100 vh}
Vh代表视口高度
有了新的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
我试图在CSS中设置一个div到一定比例的高度
什么比例?
要设置百分比高度，其父元素(*)必须具有显式高度。这是不言自明的，因为如果你将height设置为auto, block将取其内容的高度…但如果内容本身的高度是以父元素的百分比表示的，那么你就陷入了两难境地。浏览器放弃，只使用内容高度。
因此div的父元素必须有一个显式的height属性。如果你愿意，这个高度也可以是一个百分比，这只是把问题提升到下一个层次。
如果你想让div的高度占视口高度的百分比，每个div的祖先，包括<html>和<body>，必须有高度:100%，所以有一个链显式的百分比高度到div。
(*:或者，如果div被定位，'包含块'，这是最近的祖先也被定位。)
另外，所有现代浏览器和IE>=9都支持新的CSS单元，相对于视口高度(vh)和视口宽度(vw):
div {
height:100vh;
}
更多信息请看这里。
你可以用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>
