CSS JQuery Div相对于窗口大小的起始位置

我有一个很长的单页面布局。包含所有内容的主容器div设计为接近页面底部（白色方块，从底部窥视到足以看到徽标，在用户不得不滚动以查看更多内容之前）。CSS JQuery Div相对于窗口大小的起始位置

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

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

我用jQuery一个小白然而，并不能弄明白。任何可用的示例或教程都将引领这一趋势？

来源

2013-04-07 obmon

你应该可以用CSS和百分比值做到这一点。你到目前为止尝试过什么，或者你的代码是什么样的？ – dsundy 2013-04-07 01:26:51

#dsundy我尝试了百分比值..与利润率，不同的位置..等他们不工作时调整浏览器窗口的大小。 – obmon 2013-04-07 02:05:27

如果我理解正确，则不需要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-07 02:32:04 dsundy

呃..哇..我很惊讶它可以很容易地在CSS中完成..谢谢！ – obmon 2013-04-07 02:49:00

做了一个捣鼓这个：http://jsfiddle.net/QQaZp/1/

基本上，任何你想要的位置（我只是用DIV，但你应该使用#whateverID）在你的CSS定位绝对设置。在加载和在javascript中调整大小时，只需将顶部属性设置为任何$(window).height()（我从此减去50像素，因此它被偷看了一下）

来源

2013-04-07 01:30:51

这是完美的谢谢你。我没有想到使用window.ready，并且我不知道jquery中有一个.resize函数。一次学习一步。再次感谢。 – obmon 2013-04-07 02:06:28

CSS JQuery Div相对于窗口大小的起始位置

回答

相关问题