Question

如果身体指定了min-height，我不会让我的第一个孩子身体达到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和谷歌上发现了其他一些帖子，但他们只是提问而没有解决方案。

Answer 1

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

因此，当您的body元素未指定height时（仅min-height，但不计算在内），100%将无法生效。< / p>

一种可能的解决方案是在position: absolute; top: 0; bottom: 0;上使用#wrapper，您的div将被拉长。这当然可能会产生一些你不想要的布局后果。

jsFiddle Demo

Answer 2

简答

将height:100vh;用于要拉伸并填满屏幕的div。

不要设置正文height: 100%;如果您的网页内容高度超过100％，则会破坏整个网站。他们无法滚动。

长答案

如果您希望网站的几个页面填满整个屏幕，同时仍允许其他页面滚动（因为它们的内容高度超过100％），则需要将div高度设置为100％，而不是整个站点的身高。

将此用作一般网站范围的css：

html {
    height: 100%;
}

body {
    min-height: 100%;
}

然后设置特定的div来填充整个屏幕（当内容的高度低于100％时）：

/* Set any div heights to 100% of the screen height*/
.div {
    height:100vh;
}

vh测量的说明：https://stackoverflow.com/a/16837667/4975772

Answer 3

我实际上找到了解决方案！

现在我有：

html, body {
    height:100%;
}

所以我的身体不是min-height。我不记得为什么我把它改成min-height，但我希望我不会面对前一段时间我明显面临的问题......

如果body具有最小高度，则CSS高度不起作用

3 个答案:

简答

长答案