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

【问题标题】：CSS or jQuery: Make last div fill the rest of the screen heightCSS 或 jQuery：使最后一个 div 填充屏幕高度的其余部分
【发布时间】：2013-07-25 19:31:57
【问题描述】：

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

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

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

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

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

编辑：这是 div 布局的图片：

【问题讨论】：

三个元素是相邻的，高度一样吗？还是在彼此之上，同样跨越初始窗口的高度？
Dropbox 检查当前窗口并设置所有适当的值以将第一个 div（'top'）推送为您在加载时看到的唯一项目（考虑到当前内容自身的大小限制）。请注意，它们也会在调整窗口大小时重新绘制。

标签： jquery html css frontend

【解决方案1】：

试试

$(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

【讨论】：

这会起作用，除了当用户缩小时内容最终是可见的。如果您看一下 Dropbox 示例，则应该在屏幕下方的内容始终保持在页面边界下方，无论窗口大小如何调整，直到用户滚动为止。
看看我的编辑是否有效。它可能对您来说不够精确。您可以尝试使用它所做的数学运算，以使 div 的确切大小适合特定浏览器。

【解决方案2】：

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

【讨论】：

这真的很整洁，但是，我有大约 6 个 div，前三个应该在屏幕的初始视图中，应该是屏幕的高度。将前 3 个包装在包装器中并使其高度为 100% 不起作用，而不是使 html 和正文高度为 100%
我想我理解您要捕获的内容 - 不是 100%，因为我不确定蓝色条带在您的图表中代表什么，但我已经更新了 jsfiddle，您可以查看它并查看：jsfiddle.net/sLANY/1
我会试试这个。蓝色条是第二个 div 的背景。它必须是绝对的，它可以延伸到屏幕的末端以覆盖无语义的网格系统。

【解决方案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
});

【讨论】：