Question

我有一组需要在初始屏幕上看到的3个元素，而在这些元素下面的主体中的东西需要低于初始屏幕的底部，但用户仍然需要能够加载后滚动到所有内容。最好的例子是dropbox.com上的登陆页面（退出时）。

无论用户缩小多少，该行下方的元素都会保持在其下方，并且在用户向下滚动之前不会看到。我正在寻找一个好的CSS或jQuery解决方案。

我见过this，但我不能简单地将这3个元素设为绝对。

对我来说，最好的方法是将第3个div的高度扩展到初始屏幕的底部，我该怎么做？

编辑：我总共有6个div，我只希望前3个可见，而其余的必须低于初始屏幕界限。

编辑：这是div布局的图片： enter image description here

Answer 1

$(document).ready(function(){
    var w = $(window).height(); //Gives height of whole window

    // then set css heights based on window height
});

有关如何制定3个div的更多信息将有所帮助！

你也可以这样做，只要他们调整窗口大小。

$(window).resize(function(){
    var w = $(window).height(); //Gives new Height of window

    //Then set css heights again
});

Answer 2

尝试

$(document).ready(function() {
var height = $(window).height();
$('div').css('height', height + 'px');
});

和缩放

var zoom = document.documentElement.clientWidth / window.innerWidth;
$(window).resize(function() {
var zoomNew = document.documentElement.clientWidth / window.innerWidth;
if (zoom != zoomNew) {

    zoom = zoomNew
}
});

fiddle

Answer 3

你应该只用css来实现这一点，但重要的是将你的html和body标签定义为100％的高度：

<body>
  <div class="first">
    <h1>First Box</h1>
  </div>
  <div class="second">
    <h1>Second Box</h1>
  </div>
  <div class="third">
    <h1>Third Box</h1>
  </div>
</body>

的CSS：

* {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
}

div {
    height: 100%;
    text-align: center;
}

.first {
    background: #ccc;
}

.second {
    background: #999
}

.third {
    background: #000
}

h1 {
    color: white;
    padding-top: 100px;
}

Jsfiddle：http://jsfiddle.net/sLANY/

CSS或jQuery：使最后一个div填充屏幕高度的其余部分

3 个答案: