0

我有一个很长的单页布局。包含所有内容的主容器 div 设计为从靠近页面底部开始（白色框，从底部向外窥视刚好足以看到徽标，然后用户必须滚动查看更多内容）。

问题是不同的屏幕尺寸和不同尺寸的浏览器，主容器 div 从顶部开始的高度不同，当用户第一次到达时显示的比预期的多或少。

我的想法是我需要使用 js 来计算 window.height，减去我想要最初显示的容器的高度，然后将所有这些包装在一个跟踪浏览器大小变化的事件处理程序中。

但是，我是 Jquery 的菜鸟，无法弄清楚。任何示例或可用的教程将引领潮流？

4

2 回答 2

1

为此做了一个小提琴：http: //jsfiddle.net/QQaZp/1/

基本上，设置你想要定位的任何东西（我只是使用了 div，但你应该使用#whateverID）在你的 css 中定位绝对。在 javascript 中加载和调整大小时，只需将 top 属性设置为任何$(window).height()值（我从中减去了 50px，所以它稍微向上看）

于 2013-04-07T01:30:51.820 回答
1

如果我理解正确，您不需要 JavaScript。将 div 从顶部绝对 100% 定位，然后设置margin-top为负值。

CSS：

body, html {height: 100%;}

.section-1 {
    margin-top: -60px; /* Whatever value you want peeking out */
    position: absolute;
    top: 100%;
}

在此处查看有效的 JSFiddle：http: //jsfiddle.net/dsundy/5kt8P/1。

于 2013-04-07T02:32:04.047 回答