jquery - 如何以用户总是需要滚动才能看到的方式放置 div？

Question

我想建立一个顶部有 div 的网站，“高度”始终为 100%（不管用户的屏幕大小或浏览器窗口的大小），以便网站上的所有其他内容都是“隐藏的”并且用户需要向下滚动才能观看。

1. 问题：每次我在 div 高度中使用 100% 并将另一个 div 浮动到第一个下方时，第二个 div 移动到站点的最底部。我没有找到一种使用 height:100% 的好方法。

2. 问题：我想将内容放在中心的第一个 div 中。就像在这个 例子中一样，并将它与上面描述的例子结合起来。

我希望我的描述足够清楚，欢迎任何帮助。

问候。

Answer 1

它的工作原理，感谢chalist！我设法放置了一个具有顶部的 div (div2):{window.height} 所以不管屏幕大小/windowssize: 你总是需要滚动才能看到 div2 div1 的高度和宽度总是 100%，所以对于一些人来说是完美的地方“背景位置：封面；" 魔术师。伟大的！

$(document).ready(function(){
var w = $(window).width();
var h = $(window).height();

$('#div1').css({width: "100%", height: h, background: '#000', position: 'absolute', top: "0", left: 0});
$('#div2').css({background: '#000', position: 'absolute', top: h});
        });

Answer 2

相应地将 z-index 赋予 div 并将 margin-top 属性应用于要滚动的 div

Answer 3

使用 jquery 查找分辨率并设置元素的宽度和高度：

html:

<div id='test'></div>

jquery脚本：

$(document).ready(function(){
    var w = $(window).width();
    var h = $(window).height();

    $('#test').css({width: w, height: h, background: '#bbb', position: 'absolute', top: "0", left: 0});
});

看这里

Answer 4

html,body{
 height:100%;
 overflow:scroll;
 }

在 html 中：

 div{position:absolute; width:100%; bottom:-100px; }

PS没有测试如果我错了请纠正我