Table, table-cell, percentage height and overflow scroll issue

Question

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

The website above is displaying as I want it to in Chrome and Safari latest versions (possibly also IE9+, but this is untested at present); however, in Firefox 27.0.1 it is not. In Firefox it does make just the content in the middle scroll; the body scrolls.

The main section in the middle is based on a table, table cell, then wrapper with percentage height idea.

A jsFiddle of it is:

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

Code that works in the snippet is:

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;
}

However, when applied to the site, it does not work in Firefox.

Can anyone point me in the right direction?

Answer 1

In the end I abandoned this approach, and set the height using the innerHeight of the window, minus the header and footer heights, divided by 100, then multiplied by 75 to get 75% of the center of the screen. Not the greatest approach, but it works.