為什么百分比高度不適用於display：table-cell？

Question

我試圖在水平和垂直方向上將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>

Answer 1

基於您宣布寬度和高度為100％這一事實，我將假設您不希望任何人必須在這里滾動。 看到這個小提琴，我有一個基於這些參數的工作解決方案。

記住display: table-cell; 與<td>元素完全相同，除非它們位於<table> （或者是display: table;的容器）中，否則它們將無法正確呈現。

另一個問題是，如果內容非常小， <html>和<body>不一定是屏幕的高度。 html, body { height: 100%; } html, body { height: 100%; }修復這一點，但它是一個有點哈克。

為什么百分比高度不適用於display：table-cell？

問題描述

1 個解決方案

解決方案1
2 已采納 2012-01-04 02:50:43

為什么百分比高度不適用於display：table-cell？

問題描述

1 個解決方案

解決方案1 2 已采納 2012-01-04 02:50:43

解決方案1
2 已采納 2012-01-04 02:50:43