Question

出于某种原因，min-height对Firefox不起作用。我尝试在身体上设置最小高度，但Firefox完全忽略了它。由于我的页面是动态的，我不能只将高度设置为100％。我该怎么办？

body {
border: 1px solid black;
width: 100%;
min-height: 100%;
}

<body>

This is the body.

</body>

Answer 1

height百分比是继承的（包括min-height and max-height）。来自CSS规范：

指定用于确定已使用值的百分比。 百分比是根据生成的包含块的高度计算的。

大多数人都没有意识到body只是一个与其他元素一样的元素，html也是如此。人们也没有意识到这些元素没有固有的高度集。 html的父级是视口，的固有高度为100％。视口 - 或多或少 - 是浏览器窗口，减去任何菜单或标题栏。

由于height百分比继承自其父级，并且您没有为height元素设置html，因此您的min-height: 100%;的CSS不会＃39} ; t的值为100％的。所以你的身体基本上是min-height: 100%的0。

要解决此问题，只需告诉您的html元素100％是视口的高度：

＆＃13;

html {
    height: 100%; /* this is the important bit */
}

body {
    border: 1px solid black;
    width: 100%;
    min-height: 100%;
    margin: 1px; /* I added this to make the border around the body a little easier to see. Normally you want to set it to 0 or leave it alone completely */
}

＆＃13;

<body>
This is the body.
</body>

＆＃13;

但是，如果您不想将整个文档设置为与视口一样高（我强烈建议您这样做），您也可以在position: absolute;上使用body元素，以便百分比高度始终解析，无论其父元素的高度如何。这就是Saqib在上面的评论中试图得到的。分别来自最小高度和高度的CSS规范：

如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素未绝对定位，则将百分比值视为＆＃39; 0＆＃39; 0 （对于＆＃39; min-height＆＃39;）或＆＃39; none＆＃39; （对于＆＃39; max-height＆＃39;）。

-

请注意，绝对定位元素的包含块的高度与元素本身的大小无关，因此可以始终解析此元素的百分比高度。

＆＃13;

body {
    border: 1px solid black;
    width: 100%;
    min-height: 100%;
    position: absolute;
    margin: 1px; /* I added this to make the border around the body a little easier to see. Normally you want to set it to 0 or leave it alone completely */
}

＆＃13;

<body>
This is the body.
</body>

＆＃13;

（我不知道你的Chrome代码是什么代码，但你问题中的代码在Chrome中的行为与在Firefox中的行为相同。）

Firefox忽略了CSS中的min-height

1 个答案: