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

Question

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

我有两个问题:

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

2. #content position:relative; 时似乎“松动”了它的高度已添加，这是放置 #content 所必需的关于 #topgradient .我需要 #test (蓝色边框)填充#content和 #content需要填写#contentwrapper .

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

请参阅这种困惑/原型(prototype)制作 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 考虑到边框等...