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

CSS JQuery Div start position relative to window size

本文关键字：相对于 窗口大小 位置 开始 JQuery Div CSS      更新时间：2023-09-26

我有一个很长的单页布局。包含所有内容的主容器div被设计成靠近页面底部(白色框，从底部露出来刚好可以看到徽标，然后用户必须滚动才能看到更多内容)。

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

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

我是一个新手与Jquery然而，不能弄清楚它。有什么例子或教程可以指导吗?

如果我理解正确的话，您不需要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.

做了一个实验:http://jsfiddle.net/QQaZp/1/

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

相关文章：