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

时间：2022-01-14 08:09:39

I don't get my first child in the body to 100% height, if the body has min-height specified.

如果身体指定了最小高度,我不会让我的第一个孩子身体达到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>

This does not resize the wrapper to the height of the window. When I remove the min- and use height, it'll work. But I have to have the content height variable...

这不会将包装器的大小调整为窗口的高度。当我移除最小和使用高度时,它将起作用。但我必须有内容高度变量...

I did find some other posts here on SO and on google, but they have just questions and no solution.

我确实在SO和谷歌上发现了其他一些帖子,但他们只是提问而没有解决方案。

3 个解决方案

#1

22  

When you use a percentage value for height, it will always be relative to the specified height of the parent element. Not the actual height of the parent element, but the height specified in CSS.

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

So when your body element has no height specified (only min-height, but that does not count), the 100% will not be able to take effect.

所以当你的body元素没有指定高度时(只有min-height,但不计算),100%将无法生效。

One possible solution is to use position: absolute; top: 0; bottom: 0; on your #wrapper, and your div will be stretched. This of course might have some layout consequences that you do not want.

一种可能的解决方案是使用position:absolute;顶部:0;底部:0;在你的#wrapper上,你的div会被拉长。这当然可能会有一些你不想要的布局后果。

jsFiddle Demo

#2

10  

Short Answer

Use height:100vh; for divs you want to stretch and fill the screen.

使用高度:100vh;对于想要拉伸和填充屏幕的div。

Do not set body's height: 100%; It will break your entire site if you have pages that have more than 100% in content height. They won't be able to scroll.

不要设置身高:100%;如果您的内容高度超过100%的页面,它将破坏整个网站。他们将无法滚动。

Long Answer

If you want a few pages of your website to fill the entire screen while still allowing other pages to scroll (because they have more than 100% height in content), you need to set the div height to 100%, not the entire site-wide body height.

如果您希望网站的几页填满整个屏幕,同时仍然允许其他页面滚动(因为它们的内容高度超过100%),您需要将div高度设置为100%,而不是整个网站 - 宽身高。

Use this as general site-wide css:

使用此作为一般站点范围的CSS:

html {
    height: 100%;
}

body {
    min-height: 100%;
}

Then set specific divs to fill the entire screen (when they have less than 100% height in content):

然后设置特定的div来填充整个屏幕(当内容的高度低于100%时):

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

Explanation of the vh measurement: https://*.com/a/16837667/4975772

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

#3

5  

I actually found a solution!

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

Now I have:

我现在有:

html, body {
    height:100%;
}

So my body is not min-height. I don't remember why I changed it to min-height, but I hope I won't face the issue I obviously faced some time ago...

所以我的身体不是最小高度。我不记得为什么我把它改成了最小高度,但我希望我不会面对前一段时间我明显面临的问题......

#1

22  

When you use a percentage value for height, it will always be relative to the specified height of the parent element. Not the actual height of the parent element, but the height specified in CSS.

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

So when your body element has no height specified (only min-height, but that does not count), the 100% will not be able to take effect.

所以当你的body元素没有指定高度时(只有min-height,但不计算),100%将无法生效。

One possible solution is to use position: absolute; top: 0; bottom: 0; on your #wrapper, and your div will be stretched. This of course might have some layout consequences that you do not want.

一种可能的解决方案是使用position:absolute;顶部:0;底部:0;在你的#wrapper上,你的div会被拉长。这当然可能会有一些你不想要的布局后果。

jsFiddle Demo

#2

10  

Short Answer

Use height:100vh; for divs you want to stretch and fill the screen.

使用高度:100vh;对于想要拉伸和填充屏幕的div。

Do not set body's height: 100%; It will break your entire site if you have pages that have more than 100% in content height. They won't be able to scroll.

不要设置身高:100%;如果您的内容高度超过100%的页面,它将破坏整个网站。他们将无法滚动。

Long Answer

If you want a few pages of your website to fill the entire screen while still allowing other pages to scroll (because they have more than 100% height in content), you need to set the div height to 100%, not the entire site-wide body height.

如果您希望网站的几页填满整个屏幕,同时仍然允许其他页面滚动(因为它们的内容高度超过100%),您需要将div高度设置为100%,而不是整个网站 - 宽身高。

Use this as general site-wide css:

使用此作为一般站点范围的CSS:

html {
    height: 100%;
}

body {
    min-height: 100%;
}

Then set specific divs to fill the entire screen (when they have less than 100% height in content):

然后设置特定的div来填充整个屏幕(当内容的高度低于100%时):

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

Explanation of the vh measurement: https://*.com/a/16837667/4975772

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

#3

5  

I actually found a solution!

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

Now I have:

我现在有:

html, body {
    height:100%;
}

So my body is not min-height. I don't remember why I changed it to min-height, but I hope I won't face the issue I obviously faced some time ago...

所以我的身体不是最小高度。我不记得为什么我把它改成了最小高度,但我希望我不会面对前一段时间我明显面临的问题......

标签：

相关文章