css - HTML滚动div布局问题

Question

我正在尝试设计具有以下要求的 HTML 页面:

• 一个固定的页眉 (headerBox) 和页脚 (footerBox) 元素(不应滚动)
• 内容区域包含一个顶部(宽度 100%，contentBoxMap)元素，可以在整个内容区域展开
• 顶部内容元素 (contentBoxMap) 下方的左 (contentBoxLeft) 和右 (contentBoxRight) 内容元素
• 右侧的内容元素 (contentBoxRight) 应该扩展到底部并在溢出时滚动。

我想出了一个 solution [jsbin] 几乎可以工作。问题是在页脚下方流动的正确内容元素中存在一些溢出。以下图为例: alt text http://img541.imageshack.us/img541/897/screenshot150206.png

问题:

1. 谁能告诉我如何解决 contentBoxRight 中的溢出问题？如果您能告诉我我当前的解决方案有什么问题，我也很高兴。

2. 考虑到浏览器兼容性，这是否是一个好的方法？最后，它在 IE 7+、FF 3+​​、Safari 3+ 上看起来应该是一样的。 IE6 和 Opera 看起来应该没问题，但有点不同也没关系。

感谢任何提示。

Answer 1

可以删除#contentBoxRight中的属性height:100%;，然后修复#contentBox的蓝色背景。