以下代码正常工作
<!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>
奇怪的是,在使用铬进行检查时,在两种情况下,正确占用100%的空间.在min-height情况下,然而,子元素min-height: 100%;转换为0.为什么会发生,有没有什么解决方法吗？我希望我的网页的最小高度可以正常工作并根据需要进行扩展.
min-height仅当设置了显式高度时,该属性才有效.规范读取百分比:
指定用于确定已使用值的百分比.百分比是根据生成的框的包含块的高度计算的.如果未明确指定包含块的高度(即,它取决于内容高度),并且此元素未绝对定位,则百分比值将被视为"0"(对于"min-height")或"none" ('max-height').
关键在于"如果未明确指定包含块的高度(即,它取决于内容高度)." 当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"元素子元素计算背景属性的值,并且不得为该子元素绘制背景.如果仅为根元素绘制它们,那么这些背景也必须固定在同一点上.