gpt4 book ai didi

css - 100% 高度的 div 有问题

转载 作者:太空宇宙 更新时间:2023-11-04 15:22:56 25 4
gpt4 key购买 nike

我在使用 CSS 100% 高度时遇到了一个奇怪的问题。我的站点的站点如下:

<html>
<body>
<div id="container">
<div id="header"></div>
<div id="content"></div>
</div>
</body>
</html>

我试图让容器的最小高度为 100%,所以我的 CSS 如下:

html { min-height: 100%; }
body { height: 100%; }
#container { height: 100%; }

问题是,#container 不会填充 100% 的高度,只会根据 #header#content< 中的内容量进行扩展,如果 #header#content 为空或已删除,则 #container 根本不会展开。

我觉得我必须忽略一些非常简单的事情,但一直在看这个,而且已经走到了死胡同!有人可以指出问题吗?

最佳答案

百分比高度:要将百分比高度设置为 #container,其父元素必须具有特定高度。在这种情况下,可以使用 height:100%min-height:100% 来实现您想要的特定效果。要实现其中任何一个,#container 的每个祖先都必须具有 100% 的高度或最小高度。

html, body, #container {
height: 100%;
}

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

JS Fiddle Example


使用 min-heightheight:在您问题的狭窄范围内,它们会产生相同的效果。但是在同时具有高度和最小高度的页面上:

  • 如果最小高度大于高度(无论是否指定),将使用最小高度。
  • 如果高度大于最小高度(无论是指定的还是未指定的),将使用该高度。

如果指定了最大高度(例如 #container { max-height: 50px }),这将否决高度。但是,max-height 不能否决 min-height。 Read more at this link .

注意: min-height is not supported by some versions of Internet Explorer .

关于css - 100% 高度的 div 有问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14367578/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com