单页固定视口

时间:2013-04-18 08:38:21

标签: html5 css3

我目前正在制作单页滚动垂直网站,其视口锁定在100%高度。

我遇到的问题是给我的设计是针对1200x800(macbook 13“)视图计算的,但我使用的是1920x1080(macmini)分辨率。

此外,每个屏幕中的可用高度区域受浏览器使用的每个小部件的限制,因此800实际上可能是例如638高度(在ipads中更为深刻,其中768浏览器高度总共不是768 )。此外,设计必须以宽度和高度为中心。对于宽度,我可以使用margin:0 auto,但高度比较棘手,因为它需要使div绝对。

我到目前为止所做的是将div设为绝对值并通过javascript操纵它,但我想知道 如果有纯粹的css方法可以做到 因为javascript需要很多案例和多余的代码。

1 个答案:

答案 0 :(得分:0)

这是我正在使用的身高和html高度为100%

<div style=" display:table;width:100%;height:100%">
    <div style="display:table-cell;vertical-align:middle;">

    </div>
</div>