为什么百分比高度不适用于display:table-cell？

Question

为什么百分比高度不适用于display:table-cell？

我试图在水平和垂直方向上将div放在外部div中.它适用于外部div具有特定的宽度和高度设置像素

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

Run Code Online (Sandbox Code Playgroud)

但是当高度和宽度都是百分比时,它会失败

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

Run Code Online (Sandbox Code Playgroud)

为什么会这样,是否有解决方法？

编辑这是带有容器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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ans*_*osa 2

基于您声明的宽度和高度为 100% 的事实，我假设您不希望任何人必须滚动到此处。请参阅此小提琴，其中我有一个基于这些参数的工作解决方案。

请记住，其display: table-cell;行为与元素完全相同<td>，除非它们位于<table>（或容器display: table;）中，否则它们将无法正确渲染。

另一个问题是，如果内容非常小，<html>则和<body>不一定是屏幕的高度。html, body { height: 100%; }修复了这个问题，但有点hacky。

归档时间：	13 年，11 月前
查看次数：	11586 次
最近记录：	12 年，4 月前