向下滚动时将 DIV 扩展到页面底部答案

【问题标题】：Expand DIV to page bottom when scrolling down向下滚动时将 DIV 扩展到页面底部
【发布时间】：2014-02-11 12:27:58
【问题描述】：

在我的网站上，我希望页面底部有一个“div”。它没有固定高度，但应始终从页面顶部开始 '200px'。

我遇到的问题是当'div'的内容很长时，向下滚动时它的背景不会展开。

这是我的代码：JSFiddle (updated)

我曾尝试使用height=auto 和border=auto，但是当内容较少且您不必向下滚动时，“div”不会延伸到页面底部。

更新：

很抱歉错过了表达我的问题：我需要'div' 有position: relative，因为我需要将它定位在页面的中心，并带有left=10% 和right=10%。

我还更新了 JSFiddle。

更新 2：

我想这个问题没有完美的解决方案。我最终会做什么：拥有两个“div”。第一个div上面会有页面内容，内容少的时候不显示背景；另一个 div 将在 content-div 后面，根本不会滚动，但是当内容较少时，它会显示前面 div 的背景。

【问题讨论】：

尝试使用overflow: hidden 或overflow:scroll。
@helderdarocha 我不想在不向下滚动的情况下隐藏未显示的文本，我也不想在页面中有额外的滚动条。我希望 div 上方的 200px 在向下滚动时消失。
很长还是不是很长？因为如果它很长，那么它应该扩大。看看你自己的小提琴。它在页面底部。

【解决方案1】：

我已经改变了您原来的一些“设计”以满足您的要求。

首先，这是我的jsfiddle

#top {
    height:200px;
    background:#FFF;
}
body {
    background:red;
    margin:0;
    padding:0;
}

我所做的是将整个页面背景设置为红色。使#top 高度为200px，背景为白色，因此#bottom 将与顶部相距200px。现在我所做的技巧是，如果内容较少，#bottom 实际上不会触及底部，但您看到的是身体背景和#bottom 没有背景的错觉。

【讨论】：

【解决方案2】：

将其更改为相对位置将在您的示例小提琴中起作用。

【讨论】：

【解决方案3】：

将height: auto; 添加到您的 div 的 css 中

编辑： 并删除bottom: 0;

【讨论】：