1

我想创建一个简单的 2 页布局，但在创建时遇到了一些问题。

两个页面都占据页面的全宽和全高。第二页存在，但在第一页上方（垂直）隐藏在屏幕之外。单击按钮时，第一页向下移动，第二页从上方向下移动。

我的第一次尝试涉及 2 个绝对定位的盒子。IE

#page1, #page2 { position: absolute; width: 100%; height: 100%; }
#page2 { margin-top: -100%; }

从结构上讲，这适用于 Chrome。#page2 离开屏幕，并且 page1 可见。不幸的是，它对其他一些用户来说并不是那么好。

在使用一些简单的 jquery 单击我的按钮时，我像这样对 css 进行了动画处理：

$('#learnmore').click(function(){

    $('#page1').animate({'margin-top':'100%'},500);
    $('#page2').animate({'margin-top':'0'},500);
});

所以基本上，第 1 页添加了 100% 的边距，而第 2 页的边距被删除了。这在我的计算机上运行良好，但其他用户报告了问题。我认为这一定是我的布局的结构性问题。

在我看来，不同的浏览器不喜欢 width: 100% 和 height: 100% 并且正在产生一些意想不到的结果。这是真的？

有什么更好的方法来实现这一点，以便第二页隐藏在屏幕外，并在点击时从上方向下滚动？目的是让 page1 在加载时可见，屏幕上没有滚动条，然后一旦 page2 被拉下，用户可以根据需要向后滚动。

编辑：这是我使用不同结构的一种方式的 JSfiddle - 您在浏览器上看到任何问题吗？你能改进一下吗？

谢谢你的帮助。

4

1 回答 1

1

考虑使用 $(window).height()，而不是使用 100% 作为 margin-top。如果您确定初始屏幕的高度为 100%，将为您提供相同的结果并适用于所有浏览器。

$('#learnmore').click(function(){

    $('#page1').animate({'margin-top':$(window).height()},500);
    $('#page2').animate({'margin-top':'0'},500);
});

您还需要在 document.ready() 上将 page1 的宽度和高度设置为 100%

$('#page1').css("height", $(window).height() + "px");

在 learnmore.click() 中为#page2 做同样的事情

于 2012-07-23T12:36:56.973 回答