表，表格单元格，百分比高度和溢出滚动问题

Question

http://www.taste-cafe.co.uk/menu/

上面的网站显示我想要的Chrome和Safari最新版本（可能还有IE9 +，但目前尚未经过测试）;但是，在Firefox 27.0.1中并非如此。在Firefox中，它确实只在中间滚动中创建内容;身体滚动。

中间的主要部分基于表格，表格单元格，然后是高度百分比的包装。

它的一个小问题是：

http://jsfiddle.net/fs6Lp/4/

代码段中的代码是：

HTML

<div id="countdownBoxContainer">
    <div id="countdownWrapper">
        <div id="countdownBox">
            <div><p>Hello world</p></div>
        </div>
    </div>
</div>

CSS

html,
body {
    height: 100%;
    overflow: hidden;
}

#countdownBoxContainer {
    display: table;
    height: 100%;
    width: 100%;
}

#countdownWrapper {
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

#countdownBox {
    height: 75%;
    background: #000;
    color: #fff;
    overflow-y: scroll;
}

但是，当应用于网站时，它在Firefox中不起作用。

有人能指出我正确的方向吗？

Answer 1

最后我放弃了这种方法，并使用窗口的innerHeight设置高度，减去页眉和页脚高度除以100，然后乘以75得到屏幕中心的75％。不是最好的方法，但它有效。