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

时间:2014-03-04 13:22:44

标签: css firefox css-tables

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中不起作用。

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

1 个答案:

答案 0 :(得分:0)

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