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

Question

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

我有 2 个问题：

1. 当#content 包含大量数据时，它会在视口上展开，我找不到在底部留出边距的方法。

2. 当添加position:relative; 时，#content 似乎“松散”了它的高度，这是将#content 放在#topgradient 上所必需的。我需要#test（蓝色边框）填充#content，#content需要填充#contentwrapper。

我有一个现有的固定布局，效果很好，问题是在我在 div 上添加/更改 height: auto; min-height: 100%; 后开始的。

看到这种混乱/原型设计的 jsfiddle：http://jsfiddle.net/bQeu3/2/（点击白色区域 (#content) 更改内容）

问题 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...