Html 为什么100%并不意味着100%的身高？_Html_Css

Html 为什么100%并不意味着100%的身高？

html css

Html 为什么100%并不意味着100%的身高？,html,css,Html,Css,我正试图让一些divs扩展以填充屏幕，但我正在努力。我已经详细分析了这个问题我真正想知道的是，为什么具有100%min高度的div，当其父级具有相同的属性并且确实扩展时，没有扩展到该高度（或者根本没有扩展到该高度） <body> <div> stuff </div> </body> body { min-height: 100%; background: red; } div { min-

我正试图让一些

div

s扩展以填充屏幕，但我正在努力。我已经详细分析了这个问题

我真正想知道的是，为什么具有100%

min高度的div
，当其父级具有相同的属性并且确实扩展时，没有扩展到该高度（或者根本没有扩展到该高度）
<body>
    <div>
        stuff
    </div>
</body>

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


东西
身体{
最小高度：100%；
背景：红色；
}
div{
最小高度：100%；
背景：灰色；
}
您还需要设置html
的高度，以便100%
指的是视口高度，而不是文档高度（）：
CSS中的百分比高度对我来说没有多大意义。我会争辩说它并没有按它应该的方式工作，但CSS爱好者会坚持认为它确实如此
本文详细讨论了问题和解决方案：

这可能也有帮助：
<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> 


#外部{位置：绝对；高度：自动；宽度：200px；边框：1px实心红色；}
#内部{位置：绝对；高度：100%；宽度：20px；边框：1px纯黑；}
正文

有关上述内容的更多详细信息，请参见此处：

有两个问题，您还需要指定html的高度，如：
html, body {
    min-height: 100%;
}

此外，IE中似乎存在一个问题，即最小高度对div不起作用，但在div上指定高度起作用。因此：
html, body {
    min-height: 100%;
    background: red;
}
div {
    height: 100%;
    background: grey;
}

因为你不能在静态元素上使用100%的高度。将“位置”属性从“静态”更改为“绝对”将为您提供100%的高度
根据采购订单的要求作为回复发布。
该问题包含在以下内容中：

指定高度百分比。百分比是
根据生成的长方体的高度计算
包含块。如果包含块的高度不是
明确指定（即，它取决于内容高度），并且
元素未绝对定位，值计算为“自动”。A.
根元素上的高度百分比相对于初始值
包含块。注意：对于绝对定位的元素
包含块基于块级元素，百分比为
根据该设备的填充框高度计算
元素。这与CSS1有所不同，CSS1中的百分比始终为
相对于父元素的内容框计算
因此，为了澄清，百分比高度将引用其包含块的高度（除非它是位置：绝对
或位置：固定
）。如果包含的块没有指定的高度，那么百分比将引用auto
，它实际上不会起多大作用
position:absolute
将引用的包含块更改为最近的位置（absolute
、relative
或fixed
）元素
position:fixed
将引用的包含块更改为视口
因此，如果在包含块上指定高度，在包含块上指定静态以外的位置，或者不介意使用视口作为包含块，则可以有效地使用百分比高度
请查看我的
这将起作用
   body, html {
      height: 100vh;
    }

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

因为你不能在静态元素上使用100%的高度。将“位置”属性从“静态”更改为“绝对”将为您提供100%的高度。这是正确的答案，您应该以答案的形式提交答案，这样我们就可以选择答案了：达姆，也许我误解了你的帖子，但它与最初的问题有什么关系？他只有一列，没有浮动div。如果百分比是相对于视口的，那么百分比高度就很有意义。它并不意味着特定于浮动div，而是在容器的100%高度显示div。在本例中，文档主体将是容器，我可以看到它在JSFIDLE中工作，但在我的站点的其余部分实现时却没有。嗯……@MildFuzz你能发一个链接到你的网站吗？它目前还没有上线（而且有充分的理由！）。另外，我已经用绝对定位法修复了它，这很符合我的要求（事实上，现在我考虑了一下，这是必要的！！）@MildFuzz好吧，恐怕我真的帮不了你。您是否尝试过尽可能简化代码，并检查CSS属性是否符合您的期望（使用浏览器的开发人员工具）？正如我所说，它现在正在工作，因此我不再深入讨论。我已经对你的努力投了赞成票，但我想给引导我走上正确道路的评论者一个机会来提出一个问题，这样我就可以勾选它。谢谢：当页面嵌入到iframe中时，Dmin height:100%是不够的。请参阅“如果该包含块没有指定的高度…”-您的意思是必须明确指定它吗？如果块由于其子元素而具有高度，但没有明确的高度，该怎么办。
   body, html {
      height: 100vh;
    }

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