http://www.taste-cafe.co.uk/menu/
上面的网站显示我想要的Chrome和Safari最新版本(可能还有IE9 +,但目前尚未经过测试);但是,在Firefox 27.0.1中并非如此。在Firefox中,它确实只在中间滚动中创建内容;身体滚动。
中间的主要部分基于表格,表格单元格,然后是高度百分比的包装。
它的一个小问题是:
代码段中的代码是:
<div id="countdownBoxContainer">
<div id="countdownWrapper">
<div id="countdownBox">
<div><p>Hello world</p></div>
</div>
</div>
</div>
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中不起作用。
有人能指出我正确的方向吗?
答案 0 :(得分:0)
最后我放弃了这种方法,并使用窗口的innerHeight设置高度,减去页眉和页脚高度除以100,然后乘以75得到屏幕中心的75%。不是最好的方法,但它有效。