向下滚动时将DIV展开到页面底部

Question

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

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

这是我的代码：JSFiddle (updated)

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

更新：

很抱歉错过表达我的问题：我需要'div'才能position: relative，因为我需要将left=10%和right=10%放在页面的中心。< / p>

我还更新了JSFiddle。

更新2 ：

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

Answer 1

我已经从原版改变了一些“设计”，以便能够满足您的要求。

首先，这是我的jsfiddle

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

我所做的是将整个页面背景设置为红色。使#top height 200px的白色背景，所以#bottom将与顶部相距200px。现在我所做的诀窍是，#bottom实际上并没有触及底部，如果它的内容较少，但你看到的是身体背景的错觉和＃bottom没有背景。

Answer 2

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

Answer 3

将height: auto;添加到div的css

修改 并删除bottom: 0;