百分比高度 HTML 5/CSS

小编典典

all

我试图<div>在 CSS 中将 a 设置为某个百分比高度，但它与其中的内容保持相同的大小。但是，当我删除 HTML 5<!DOCTYTPE html>时，它可以工作，根据<div>需要占用整个页面。我希望页面验证，所以我应该怎么做？

我在上有这个 CSS <div>，它的 ID 为page：

#page {
    padding: 10px;
    background-color: white;
    height: 90% !important;
}

阅读 65

2022-06-25

共1个答案

小编典典

我正在尝试在 CSS 中将 div 设置为某个百分比高度

百分之几？

要设置百分比高度，其父元素 (*)
必须具有明确的高度。这是不言而喻的，因为如果您将高度保留为auto，则该块将采用其内容的高度......但如果内容本身的高度以父母的百分比表示，则您自己做了一点Catch
22. 浏览器放弃，只使用内容高度。

所以 div 的父级必须有一个明确的height属性。虽然如果您愿意，该高度也可以是百分比，但这只会将问题提升到一个新的水平。

如果要使 div 高度成为视口高度的百分比，则 div 的每个祖先，包括<html>和<body>，都必须具有height: 100%，因此有一个明确的百分比高度链到 div。

（*：或者，如果 div 已定位，则为“包含块”，它也是要定位的最近的祖先。）

或者，所有现代浏览器和 IE>=9 都支持相对于视口高度 ( vh) 和视口宽度 ( vw) 的新 CSS 单位：

div {
    height:100vh; 
}

2022-06-25