百分比高度HTML5/CSS

我试图在CSS中将

设置为一定的百分比高度，但它的大小与其中的内容相同。然而，当我删除HTML5

时，它工作正常，

会根据需要占据整个页面。我想验证页面，那么我应该怎么做

我在

页面上有这个CSS，它的ID是

页面

：

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

---

您还需要设置

和

元素的高度；否则，它们将仅足够大以容纳内容：

100%宽度和高度示例
html，正文{高度：100%；边距：0；}
div{高度：100%；宽度：100%；背景：红色；}

我试图在CSS中将div设置为一定的百分比高度

百分比是多少

若要设置百分比高度，其父元素（*）必须具有明确的高度。这是不言而喻的，如果您将height保留为

auto

，块将采用其内容的高度。。。但是，如果内容本身有一个高度，用父母的百分比来表示，那么你就有点让自己难堪了。浏览器放弃，只使用内容高度

因此，div的父级必须具有显式的

height

属性。如果你愿意的话，这个高度也可以是一个百分比，这只会把问题推向下一个层次

如果要使div高度占视口高度的百分比，则div的每个祖先（包括

和

）都必须具有

高度：100%

，因此存在一个到div的明确百分比高度链

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

或者，所有现代浏览器和IE>=9都支持相对于视口高度（

vh

）和视口宽度（

vw

）的新CSS单元：

---

请参见此处。

bobince的回答将让您知道在哪些情况下“高度：XX%；”将起作用或不起作用

如果要创建具有设置比率（高度占其自身宽度的百分比）的元素，最好的方法是使用

填充底部

有效地设置高度。正方形的示例：

<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%;
}

.square容器{/*任意显示：块；元素*/
位置：相对位置；
身高：0；
填充底部：父宽度的100%；/**/
}
.正方形内容{
位置：绝对位置；
左：0；
排名：0；
身高：100%；
宽度：100%；
}

---

方形容器将由填充物构成，内容将扩展以填充容器。2009年关于这个主题的长篇文章：

您可以使用

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表示视口高度

---

我认为这很有帮助，我花了20分钟才弄明白我必须将文档的高度设置为100%。我读这篇文章有点晚了，但它仍然非常精彩。叹气这应该被选为答案，因为它为来这里想知道能做什么的很多人提供了一个解决方案大多数人看着第一个答案，认为这是不可能的，然后在没有阅读这篇文章的情况下思考是否存在任何其他方法我同意这是正确的答案，高度不起作用，因为需要设置父元素body和html。此答案应为可接受答案。这不是正确答案-如果内容大于屏幕高度，则其余内容将不再可见，因此高度未设置为浏览器窗口的100%，而是再次设置为内容的100%。这可能不符合逻辑，但这就是Firefox和Chrome这两种主要浏览器的情况——试试看。因此，被接受的答案是唯一正确的答案。虽然不适用于纵向屏幕方向，但请参见下面Brian Campbell的答案，我相信这是正确的解决方案。这个答案似乎是一个解决办法，并没有解决实际问题。好吧，那么为什么这个例子没有为宽度创建catch 22呢/下面是对CSS

height

属性和百分比值的简单而清晰的解释：解决DOCTYPE问题：看看这篇根据CSS规范给出答案的文章：这很好用。在调整包含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>