为什么这个div高度没有被计算出来？

有人知道为什么黄箱的高度计算不正确（100px）？为什么这个div高度没有被计算出来？

我需要知道定义的CSS使JavaScript的部分知道真正的高度...

<div id="footer"> 
<div class="header"> 
    Header 
</div> 
<div class="content"> 
    Content blub  
</div> 
</div>

这里是一个的jsfiddle - http://jsfiddle.net/3nM7f/

来源

2012-11-26 Matty

适合我。 –

因为它的高度是148px的100％。 – max

我如何存档148px - 标头高度的100％？ – Matty

这是因为你使用的百分比%其定义而不是像素px。

您需要更改

.content{ 
    height:100%; 
    background-color:yellow; 
}

到

.content{ 
    height:100px; 
    background-color:yellow; 
}

和您的所有部分将正确显示。

jsfiddle here。

来源

2012-11-26 11:05:58 lifetimes

是的，但是页脚高度是由用户变化的...所以我不知道.content的固定高度：o/ – Matty

在这种情况下，您可以将.content设置为50％的高度，以便它适应放置的任何内容页脚和所有部分都可以查看。 – lifetimes

不，因为.content应该是#footer的所有可用高度（减去标题） – Matty

身高100％总是取父母div的高度。如果你愿意，你可以使用javascript设置它的高度。您需要将jquery js文件包含在您的网站标题中。语法可能不是100％正确，但您可以使用概念

var height = $(".footer").css("height") - $(".header").css("height"); 
$(".content").css("height",height);

来源

2012-11-26 11:20:49

我知道这种方式。但我需要一个更通用的。想象一下限制其可用空间的.content框上面还有更多的元素。 – Matty

好的，在这里你去。这件事情正如我所说的，身高100％将始终占据父div的高度，在本例中为footer。但是当你不断添加诸如header或者更像header1，header2的div时，所有这些都会推动下面的“内容”div，内容总是会占用可用的空间。但如果你尝试计算“内容”的高度，它会给你“100％”，即148px（父母的身高）。你可以尝试添加更多的div，看看会发生什么 –

为什么这个div高度没有被计算出来？

回答

相关问题