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

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

我遇到的问题是，当“DIV”的内容很长，它的背景，当你向下滚动不展开。

这里是我的代码：JSFiddle (updated)

我试图与height=auto和border=auto工作，但随后的“格”不伸展到页面底部时有较少的内容，你就不必滚动下。

更新：

对不起，小姐表达我的问题：我需要“DIV”有position: relative，因为我需要它定位在页面与left=10%和right=10%中心。

我也更新了JSFiddle。

更新2：

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

2014-02-11 Frithjof

尝试使用'overflow：hidden'或'overflow：scroll'。 – helderdarocha

@helderdarocha我不想隐藏没有向下滚动显示的文本，也不想在页面中有额外的滚动条。向下滚动时，我希望div上方的200像素消失。 – Frithjof

很长或不是很长？因为如果它很长，那么它应该扩大。看你自己的小提琴。它确实在页面的底部。 – Craftein

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

2014-02-11 12:31:44 css

对不起，我不能改变它的位置：相对。查看更新的问题。 – Frithjof

添加height: auto;到您的div的CSS

编辑： 和删除bottom: 0;

2014-02-11 12:33:46 FabioG

当div中只有几行文本时，这不起作用，因为我希望它伸展到页面的底部。 – Frithjof

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

首先，这是我jsfiddle

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

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

2014-02-11 13:06:28 Craftein

回答