爲什麼百分比高度不適用於顯示：表格單元？

我試圖在一個外部div中水平和垂直居中一個div。它的工作原理，當外div有特定的寬度和高度，以像素爲單位設置像爲什麼百分比高度不適用於顯示：表格單元？

#countdownBox { 
    width: 700px; 
    height: 500px; 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
}

但在高度和寬度都像

#countdownBox { 
    width: 100%; 
    height: 100%; 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
}

百分比這是爲什麼有一個變通失敗和？

編輯這裏是容器CSS的HTML：

#countdownBoxContainer { 
width: 100%; 
height: 100%; 
position: absolute; 
bottom: 0; 
left: 0; 
z-index: 3; 
} 

<div id="countdownBoxContainer"> 
    <div id="countdownBox"> 
     <div> 
     hi there 
     </div> 
    </div> 
</div>

來源

2012-01-04 zakdances

HTML的外觀如何？百分比寬度和高度（通常）將不起作用，除非包含元素具有設置尺寸。 – HackedByChinese 2012-01-04 02:25:35

添加了HTML。該容器與其父項大小相同。 – zakdances 2012-01-04 02:36:52

基於這樣的事實，你有寬度和100％的高度宣佈我會假設你不希望任何人必須在這裏滾動。 See this Fiddle其中我有一個基於這些參數的工作解決方案。

記住display: table-cell;行爲酷似<td>元素，除非他們是在一個<table>（或容器是display: table;），他們將無法正確顯示。

另一個問題是，如果內容非常小，則<html>和<body>不一定是屏幕的高度。 html, body { height: 100%; }解決了這個問題，但它有點兒怪異。

來源

2012-01-04 02:50:43

這工作，謝謝。但是，爲了保持元素的絕對位置，我不得不添加另一個包含display：table div的外部包裝。這意味着我現在有3層divs只是爲了集中一個元素......看起來該死的笨拙。 – zakdances 2012-01-04 03:06:57

爲什麼你需要將容器放置在絕對位置？ – 2012-01-04 03:08:05

因爲它需要重疊其他div。 – zakdances 2012-01-04 03:09:28

爲什麼百分比高度不適用於顯示：表格單元？

回答

相關問題