窗口调整大小时重新验证DIV的尺寸

时间:2015-06-30 09:26:17

标签: javascript html css

我正在寻找一种方法来在窗口调整大小时重新验证div的大小。

我有一个高度为100%且宽度为100%的div,当我调整窗口大小时,我可以在这个窗口下方看到div的一部分。

我想得到的一个完美的例子就是这个网站:

http://maltedemuth.com/

当您垂直调整大小时,您会看到网站第二部分的顶部,但随后会重新验证第一个div的大小。

编辑:

<body style="overflow:hidden;">
<div style="background-color:black;height:100%;width:100%;">DIV1</div>
<div style="background-color:blue;height:100%;width:100%;">DIV2</div>
</body>

这是我拥有的代码类型

2 个答案:

答案 0 :(得分:2)

您提供的链接使用Full Page jQuery plugin

要实现此效果,您需要遵循插件 GITHUB 页面上给出的基本布局,然后在初始化时使用verticalCentered: true选项。

他们的描述说明了一切:

  

verticalCentered :(默认为true)在部分内垂直居中。设置为true时,您的内容将被插件包装。

答案 1 :(得分:0)

您是否尝试实现同样响应的整页滚动效果?如果是这样,我建议您查看one page scroll。这将为您提供与您发布的示例类似的效果。它也非常容易设置,并提供了许多选项,您可以根据自己的需要自定义它们。