当身体有最小高度100％时身体的子元素不占用100％空间

时间：2012-05-21 13:21:51

标签： html css

以下代码works properly 

<!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代替height代码prevents #main from occupying space的代码

<!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.为什么会发生这种情况，是否有解决方法？我希望我的网页的最小高度可以正常工作并根据需要进行扩展。

2 个答案:

答案 0 :(得分：5)

至于“为什么会这样？”

min-height属性仅在设置了显式高度时才有效。 The spec读取一个百分比：

  

指定用于确定已使用值的百分比。百分比   是根据生成的框的高度计算的   包含块。如果包含块的高度不是   明确指定（即，它取决于内容高度），以及这个   元素没有绝对定位，处理百分比值   为'0'（'min-height'）或'none'（'max-height'）。

关键在于“如果包含块的高度不是 明确指定（即，它取决于内容高度）。“当body设置为min-height时，仍然取决于内容高度进行计算，只是它不允许它会低于指定的大小（在您的情况下，显式设置的html高度的100％）。但是，因为body仍依赖于内容来设置其高度，所以{{1}无法计算div#main，因为min-height没有明确的高度设置。

需要“解决方法”吗？

似乎将body设置为body可以实现您想要的一切。是content is long还是content is short。

对height: 100%

html更改的评论回复

我怀疑your fiddle background-color html设置background-color设置更改的原因是因为this spec中的符号（引用如下）。通过在html上进行设置，它会更改 canvas 呈现自身：

  

根元素的背景成为背景   帆布和覆盖整个画布，锚定（为   '背景位置'）与它的相同点   仅为根元素本身绘制。根元素没有   再次画这个背景。

     

但是，对于HTML文档，我们建议作者指定   BODY元素的背景而不是HTML元素。对于   其根元素是HTML“HTML”元素或XHTML的文档   “html”元素，计算出'transparent'的值   'background-color'和'none'代表'background-image'，用户代理必须   而是使用背景属性的计算值   element的第一个HTML“BODY”元素或XHTML“body”元素的子元素   绘画画布背景，不得画背景   对于那个子元素。这样的背景也必须固定在   如果它们仅为根绘制，它们将是相同的点   元件。

答案 1 :(得分：-1)

尝试在&nbsp;标记内添加<div id="main"/>。

相关问题
最新问题