min-height 不适用于多个子 div答案

【问题标题】：min-height not working with multiple child divsmin-height 不适用于多个子 div
【发布时间】：2023-03-31 20:54:01
【问题描述】：

我有一个网站，我使用 height auto 设置内容 div 的高度和最小高度 100% 以确保内容 div 始终拉伸页面的高度。

我的 HTML 看起来像这样

<html>
<body>
 <div id="holder">
  <div id="outercontent">
   <div id="innercontent">
    content goes here
   </div>
  </div>
 </div>
</body>
</html>

我的css规则如下

html,body {
    height:100%;
    color:white;
}

#holder {
    background-color:transparent;
    width:100%;
    min-height:100%;
    height:auto;
    position:absolute;
    z-index:1;
}
#outercontent {
    min-height:100%;
    height:auto;
    width:940px;
    margin-left:auto;
    margin-right:auto;
    background-color:transparent;
    background-image:url(../images/bowsides.png);
    background-repeat:no-repeat;
    overflow:hidden;
}
#innercontent {
    width:900px;
    height:auto;
    min-height:100%;
    margin-left:auto;
    margin-right:auto;
    background-color:#ffefce;
    overflow:hidden;
}

持有人 div 是一个绝对定位的 DIV，我需要这个，因为我有一个旋转背景，它将每个背景图像放在一个单独的绝对定位的 div 上。所以这个 div 使用 z-index 放置在它们之上。

外部内容比我的内部内容宽一点，这是用来给我空间放置边框图像（因为尚不广泛支持 css3 边框图像）

内部内容是我的主要内容区域

min-height 100% 适用于 holder div（即组的最外层 div），但不适用于任何浏览器中的外层内容或内层内容

这是为什么？

【问题讨论】：

说 min-height:100% 有什么意义。为什么不直接说身高：100%？另外 height:auto 是默认值，所以需要设置它。为什么持有人有立场：绝对？无论如何，如果您只是告诉所有 DIV 为 100%，我认为它应该可以工作。
该网站将由 CMS 驱动，这意味着我不能保证内容生成的高度是屏幕高度的 100%。所以我确实需要最小高度（或其他解决方案）才能工作。持有人具有绝对位置，因此我可以使用 z-index 使内容显示在背景之上。我需要这样做，因为该站点具有具有淡入/淡出效果的旋转背景。每个背景图像都必须有自己的固定位置 DIV，因为 DIV 具有 opacity 属性而 img 标签没有。

标签： html position absolute css

【解决方案1】：

你可以尝试使用deleveloper工具在IE中打开源代码吗，我猜有些东西会覆盖高度，你会得到确切的图片

【讨论】：

所有浏览器都会出现问题——不仅仅是 IE
我明白，但这会让我们知道什么是最重要的