3

以下代码正常工作

<!DOCTYPE html>
<html>
<head>
<title>Working</title>
<style type="text/css">
html {
  height: 100%;
}
body {
  height: 100%; /* !!!!! difference in here */
}
div#main {
  min-height: 100%;
  background-color: red;
}
</style>
</head>
<body>
    <div id="main"></div>
</body>

而使用min-height而不是heightfor body的代码可以防止 #main 占用空间

<!DOCTYPE html>
<html>
<head>
<title>Not working</title>
<style type="text/css">
html {
  height: 100%;
}
body {
  min-height: 100%; /* !!!!! difference in here */
}
div#main {
  min-height: 100%;
  background-color: red;
}
</style>
</head>
<body>
    <div id="main"></div>
</body>

奇怪的是,在使用 chrome 进行检查时,在这两种情况下,主体都正确占用了 100% 的空间。但是min-height,如果子元素min-height: 100%;转换为 0。为什么会发生这种情况,是否有任何解决方法?我希望我的网页背景的最小高度能够正常工作并根据需要扩展。

4

2 回答 2

5

至于“为什么会这样?”

min-height属性仅在设置了显式高度时才有效。规范读取百分比:

指定用于确定使用值的百分比。该百分比是相对于生成框的包含块的高度计算的。如果没有明确指定包含块的高度(即,它取决于内容高度),并且该元素不是绝对定位的,则百分比值被视为'0'(对于'min-height')或'none' (对于“最大高度”)。

其中的关键点是“如果未明确指定包含块的高度(即,它取决于内容高度)。” 当body设置为 时min-height,它仍然取决于内容高度进行计算,只是它不允许它低于指定的大小(在你的情况下,html是显式设置的高度的 100%)。但是,由于body仍然是根据内容来设置其高度,div#main所以无法计算min-height,因为body没有明确的高度设置。

是否需要“解决方法”?

似乎设置body可以height: 100%实现您想要的一切。内容是长的还是短

html对更改的评论的回应background-color

我怀疑html设置更改的原因是因为本规范background-color中的符号(引用如下)。通过在它上面设置它会改变画布渲染本身:html

根元素的背景成为画布的背景并覆盖整个画布,锚定在同一点(对于“背景位置”),就像它仅为根元素本身绘制时一样。根元素不会再次绘制此背景。

然而,对于 HTML 文档,我们建议作者为 BODY 元素而不是 HTML 元素指定背景。对于根元素是 HTML "HTML" 元素或 XHTML "html" 元素的文档,其 'background-color' 的计算值为 'transparent' 和 'background-image' 的计算值为 'none',用户代理必须改为使用在为画布绘制背景时,从该元素的第一个 HTML“BODY”元素或 XHTML“body”元素子元素计算的背景属性值,并且不得为该子元素绘制背景。这样的背景也必须锚定在同一点,就像它们只为根元素绘制时一样。

于 2012-05-21T13:44:49.797 回答
-1

尝试在标签&nbsp;内放置一个。<div id="main"/>

于 2012-05-21T13:43:26.373 回答