Question

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

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

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

#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％的保证金，并删除了page2的保证金。这在我的计算机上运行正常，但其他用户报告了问题。我认为它必须是我的布局的结构性问题。

在我看来，不同的浏览器不喜欢宽度：100％和高度：100％并且正在创建一些意想不到的结果。这是真的吗？

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

编辑：Here is a JSfiddle of a way I have gone about it using a different structure - 您是否在浏览器上看到此问题？你能改进吗？

感谢您的帮助。

Answer 1

不要使用100％作为margin-top，而是考虑使用$（window）.height（）。如果您确定初始屏幕的高度为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做同样的事情

跨浏览器友好，多页全屏，滚动到布局

1 个答案: