高度百分比HTML 5 / CSS


188

我试图<div>在CSS中将a设置为一定的百分比高度,但它的大小与其中的内容相同。<!DOCTYTPE html>但是,当我删除HTML 5时,它可以工作,<div>并按需要占用整个页面。我希望页面进行验证,那该怎么办?

我在上有此CSS <div>,其ID为page

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

3
以下是height带有百分比值的CSS属性的简单明了的解释:stackoverflow.com/a/31728799/3597276
Michael Benjamin

Answers:


383

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

百分比是多少?

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

因此div的父级必须具有显式height属性。如果您愿意的话,这个高度也可以是一个百分比,但这只会使问题上移。

如果要将div高度设置为视口高度的百分比,则div的每个祖先(包括<html><body>)都必须具有height: 100%,因此存在一个明确的百分比高度下降到div的链。

(*:或者,如果div被定位,则是“包含块”,它也是要定位的最接近的祖先。)

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

div {
    height:100vh; 
}

有关更多信息,请参见此处。


尽管不工作的纵向屏幕方向stackoverflow.com/questions/23198237/...
Dchris

1
请参阅下面的Brian Campbell回答,我认为这是正确的解决方案。该答案似乎是一种解决方法,不能解决实际问题。
MG Developer

好的,然后为什么jsfiddle.net/8dkzp49w/16这个示例没有为宽度创建catch 22?:/
Murad Sofiyev

72

您还需要在<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>


6
¬_¬我花了20分钟才弄清楚我也必须将文档的高度设置为100%。我读这本书为时已晚,但它仍然非常出色。叹息
omn​​inonsense 2011年

应该将此投票作为答案,因为它为来到这里的很多人提供了解决方案,他们想知道最可以解决的问题是看第一个答案,认为这是不可能的,并且不考虑是否存在其他任何方法而无需阅读这篇文章
codefreaK

我同意这是正确的答案,高度不起作用,因为需要设置为body和html的父元素。该答案应该是被接受的答案。
MG Developer

这不是正确的答案-如果内容大于适合屏幕高度的内容,那么其余内容将不再可见,因此高度未设置为浏览器窗口的100%,而是再次设置为100%内容。这可能不合逻辑,但这就是在两种主要浏览器Firefox和Chrome中发生的事情-只需尝试一下即可。因此,公认的答案是唯一正确的答案。
nepdev

15

bobince的答案将让您知道在哪种情况下“高度:XX%;” 会或不会工作。

如果要创建一个具有固定比例(高度:其自身宽度的%)的元素,最好的方法是使用来有效地设置高度padding-bottom。正方形示例:

<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


这很好。在调整包含100多个元素的页面的大小的同时,在浏览器中感觉也很快。谢谢!
dean grande'Apr

5

您可以使用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>

4

嗨!为了使用percent(%),必须定义它的%父元素。如果您使用body {height:100%},它将无法正常工作,因为它的父级没有高度百分比。在这种情况下,为了达到该身高,您必须在html {height:100%}中添加它

在其他情况下,可以使用定义父百分比的方法

身体{height:100vh}

vh代表视口高度

我认为有帮助


3

有时,您可能需要有条件地设置div的高度,例如当整个内容小于屏幕的高度时。如果将所有父元素设置为100%,则当内容长于屏幕尺寸时,它将切断内容。

因此,解决此问题的方法是设置最小高度:

继续让父元素自动调整其高度,然后在主div中,从100vh(视口单位)中减去页眉和页脚div的像素大小。在CSS中,类似:

最小高度:calc(100vh-246px);

100vh是屏幕的全长,减去周围的div。通过设置最小高度而不是高度,比屏幕长的内容将继续流动,而不是被截断。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.