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

Question

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

我有两个问题：

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

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

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

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

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

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

希望你能帮忙？

Answer 1

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

height:100%从#page中删除

添加padding:1px到#page

添加margin-bottom:100px到#contentwrapper

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

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

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