Firefox忽略CSS中的最小高度 [英] Firefox ignoring min-height in CSS
问题描述
由于某些原因，min-height在Firefox上不起作用.我尝试在主体上设置最小高度，但Firefox完全忽略了它.由于页面是动态的，因此不能仅将高度设置为100％.我该怎么办?
For some reason, min-height is not working on Firefox. I tried setting min-height on the body, but Firefox totally ignored it. Since my page is dynamic, I cannot just set the height to 100%. What should I do?
body {
border: 1px solid black;
width: 100%;
min-height: 100%;
}
<body>
This is the body.
</body>
推荐答案
min-height和max-height ).根据CSS规范:
height percentages are inherited (that includes min-height and max-height, too). From the CSS spec:
指定用于确定使用值的百分比. 百分比是根据生成的框的包含块的高度计算的.
大多数人没有意识到的是body只是一个元素，与其他元素一样，html也是如此.人们还没有意识到的是，这些元素没有固有的高度设置. html的父级是视口，并且确实具有100％的固有高度.视口或多或少是浏览器窗口，减去任何菜单或标题栏.
What most people don't realize is that body is just an element like any other, and so is html. What people also don't realize is that these elements don't have an inherent height set. The parent of html is the viewport, and it does have an inherent height of 100%. The viewport is--more or less--the browser window, minus any menu or title bars.
由于height百分比是从其父级继承而来的，并且您没有为html元素设置height，因此min-height: 100%;的CSS没有值可以取100％的.因此，您的身体基本上取0的min-height: 100%.
Since height percentages inherit from their parent, and you don't have a height set for your html element, your CSS of min-height: 100%; doesn't have a value to take 100% of. So your body is taking min-height: 100% of 0, basically.
要解决此问题，只需告诉您html元素为视口高度的100％:
To fix this, simply tell your html element to be 100% the height of the viewport:
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 */
}
<body>
This is the body.
</body>
但是，如果不想将整个文档设置为与视口一样高(强烈建议这样做)，也可以在body元素上使用position: absolute;，以使百分比高度将始终解析，而不管其父元素的高度如何.这就是萨奇布(Saqib)在上述评论中试图达到的目的.从CSS规范分别了解最小高度和高度:
However, if you don't want to set your entire document to be as tall as the viewport (I strongly recommend that you do), you can also use position: absolute; on your body element so that the percentage height will always resolve, regardless of the height of its parent element. This is what Saqib was trying to get at in the comments above. From the CSS Spec on min-height and height, respectively:
如果未明确指定包含块的高度(即，它取决于内容的高度)，并且该元素的位置不是绝对的，则将百分比值视为"0"(对于"min-height")或无"(用于最大高度").
If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as '0' (for 'min-height') or 'none' (for 'max-height').
-
请注意，绝对定位的元素的包含块的高度与元素本身的大小无关，因此可以始终解析此元素上的百分比高度.
Note that the height of the containing block of an absolutely positioned element is independent of the size of the element itself, and thus a percentage height on such an element can always be resolved.
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 */
}
<body>
This is the body.
</body>
(我不知道您的代码在Chrome中运行什么，但是您问题中的代码在Chrome中的行为与在Firefox中的行为相同.)
(I don't know what code of yours is working in Chrome, but the code in your question has the same behavior in Chrome as it does in Firefox.)
这篇关于Firefox忽略CSS中的最小高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
