5

我有一组需要在初始屏幕上看到的 3 个元素，而这些元素下方的正文中的内容需要位于初始屏幕的底部下方，但用户仍然需要能够滚动到所有内容负载后。完美的例子是 dropbox.com 上的登录页面（注销时）。

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

我已经看到了这一点，但我不能简单地将这三个元素设为绝对。

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

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

编辑：这是 div 布局的图片：在此处输入图像描述

4

3 回答 3

3 
$(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
});
于 2013-07-25T18:38:59.227 回答
0

尝试

$(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
}
});

小提琴

于 2013-07-25T18:38:09.247 回答
0

您应该能够仅使用 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/

于 2013-07-25T18:59:54.567 回答