爲什麼這個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高度沒有被計算出來？

回答

相關問題