html - 如果 body 有最小高度，CSS 高度不起作用

如果 body 指定了 min-height，我不会让 body 中的第一个 child 达到 100% 的高度。

<html>
    <head>
        <style>
            html {
                height:100%;
            }
            body {
                min-height:100%;
            }
            #wrapper {
                height:100%;
                min-width:1120px; /* 250px each side (content width is 870px) */
                max-width:2000px;
                background-image:url(bg.png);
                background-position:50% 25px;
                background-repeat:no-repeat;
                background-size:cover;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <!-- web content -->
        </div>
    </body>
</html>

这不会将包装器的大小调整为窗口的高度。当我删除 min- 并使用 height 时，它会起作用。但我必须有内容高度变量...

我确实在 SO 和 google 上找到了其他一些帖子，但他们只有问题，没有解决方案。

最佳答案

当您为 height 使用百分比值时，它将始终相对于父元素的指定 height。不是父元素的实际高度，而是 CSS 中指定的 height。

因此，当您的 body 元素没有指定 height 时(只有 min-height，但这不算)， 100% 将无法生效。

一个可能的解决方案是使用position: absolute;顶部:0； bottom: 0; 在你的 #wrapper 上，你的 div 将被拉伸(stretch)。这当然可能会产生一些您不希望的布局后果。

jsFiddle Demo

关于html - 如果 body 有最小高度，CSS 高度不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20681420/