HTML 5/CSS 百分比高度的技巧
P粉135292805
2023-08-20 19:15:25
<p>我试图在CSS中将一个<div>设置为特定的百分比高度，但它仍然与其中的内容大小相同。然而，当我移除HTML 5的<!DOCTYTPE html>时，它可以正常工作，<div>按预期占据整个页面。我希望页面能够通过验证，那我应该怎么做呢？</p>
<p>我在<div>上有这个CSS，它的ID是<code>page</code>：</p>
<pre class="brush:php;toolbar:false;">#page {
padding: 10px;
background-color: white;
height: 90% !important;
}</pre>
你还需要在
<html>和<body>元素上设置高度；否则，它们只会足够大以适应内容。 例如：<!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>百分比是什么的百分比？
要设置百分比高度，其父元素(*)必须具有显式高度。这是相当明显的，如果您将高度保留为
auto，则块将采用其内容的高度...但是，如果内容本身的高度以父元素的百分比表示，您就陷入了一个小困境。浏览器放弃了，只使用内容高度。因此，div的父元素必须具有显式的
height属性。虽然如果您愿意，该高度也可以是百分比，但这只会将问题提升到下一个级别。如果您想要使div的高度成为视口高度的百分比，则div的每个祖先元素，包括
<html>和<body>，都必须具有height: 100%，因此存在一个显式的百分比高度链到div。(*：或者，如果div被定位，则为“包含块”，即最近的也被定位的祖先元素。)
或者，所有现代浏览器和IE>=9都支持相对于视口高度(
vh)和视口宽度(vw)的新CSS单位：div { height:100vh; }在此处查看更多信息。