Question

我试图让一些divs扩展以填满屏幕，但我正在努力。我在this jsfiddle上解决了这个问题。

我真正想知道的是，为什么div及其100％min-height在其父级具有相同属性并且扩展时不会扩展到该高度（或根本不会）？

<body>
    <div>
        stuff
    </div>
</body>

body {
    min-height: 100%;
    background: red;
}
div {
    min-height: 100%;
    background: grey;
}

Answer 1

问题包含在CSS 2.1 spec：

中

<强>＆LT;百分比＆GT;

指定百分比高度。百分比是   根据生成的盒子的高度计算   包含块。如果包含块的高度不是   明确指定（即，它取决于内容高度），以及这个   元素没有绝对定位，值计算为'auto'。一个   根元素的百分比高度相对于初始值   包含块。注意：对于绝对定位的元素   包含块基于块级元素，百分比是   计算相对于填充箱的高度   元件。这是CSS1的变化，其中百分比始终如此   相对于父元素的内容框计算。

因此，为了澄清，百分比高度将引用其包含块的高度（除非它是position: absolute或position: fixed）。如果包含块的块没有指定的高度，则百分比将引用auto，并且它实际上不会做太多。

position: absolute将引用的包含块更改为最近的位置（absolute，relative或fixed）元素。

position: fixed将引用的包含块更改为视口。

因此，如果在包含块上指定高度，请在包含块上指定静态以外的位置，或者不介意将视口用作包含块，然后可以有效地使用百分比高度。

请参阅我的demonstration at jsFiddle

Answer 2

您还需要设置html的高度，以便100%引用视口高度而不是文档高度（demo）：

html,body {
    height: 100%;
    background: red;
    padding: 0;
}
div {
    height: 100%;
    background: grey;
}

Answer 3

因为您无法在静态元素上使用100％高度。将position属性从static更改为absolute将为您提供100％的高度。 demo

_{_{根据PO的请求发布为答案。}}

Answer 4

CSS中的百分比高度对我来说没有多大意义。我认为它不会以它应该的方式工作，但CSS爱好者会坚持认为它确实如此。

本文详细讨论了问题和解决方案：

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

这也可能有所帮助：

<style> 
    #outer {position:absolute; height:auto; width:200px; border: 1px solid red; } 
    #inner {position:absolute; height:100%; width:20px; border:1px solid black; } 
</style> 

<div id="outer"> 
    <div id="inner"></div> 
    text 
</div>

有关上述内容的详情，请参阅此处：
How to make a floated div 100% height of its parent?

Answer 5

有两个问题，您还需要指定html的高度，如：

html, body {
    min-height: 100%;
}

在IE中似乎也存在一个问题，即min-height不能为div做技巧，但在div上指定高度就可以了。就这样：

html, body {
    min-height: 100%;
    background: red;
}
div {
    height: 100%;
    background: grey;
}

Answer 6

这将有效

   body, html {
      height: 100vh;
    }

    aside {
      background: green;
      width: 200px;
      height: 100vh;
    }

为什么100％并不意味着100％的高度？

6 个答案: