具有边距底部和嵌套div 100％高度问题的流体布局

Question

我正在将现有的固定布局转换为“流畅”。

我有两个问题：

1. 当#content包含大量数据时，会使其在视口上展开，我无法找到在底部有边距的方法。

2. 添加#content时，position:relative;似乎“松散”了它的高度，这对#content #topgradient #test来说是必要的。我需要#content（蓝色边框）来填充#content，#contentwrapper需要填充height: auto; min-height: 100%;。

我有一个现有的固定布局，效果很好，我在div上添加/更改#content后问题就开始了。

看到这种混乱/原型制作的jsfiddle：http://jsfiddle.net/bQeu3/2/（点击白色区域（{{1}}）更改内容）

问题1的最佳解决方案如下：

问题2的最佳解决方案如下：

希望你能帮忙吗？

Answer 1

第一个问题： http://jsfiddle.net/bQeu3/7/

从#page

中删除height:100%

将padding:1px添加到#page

将margin-bottom:100px添加到#contentwrapper

在单击某些内容时保持#contentwrapper的大小：

#test{
  min-height: 300px;
  border: 5px solid blue;
  margin: 5px;
}

您可能需要更正300px，考虑边界等...