HTML滚动DIV布局问题
问题描述:
我试图符合下列要求设计一个HTML页面:HTML滚动DIV布局问题
- 固定头(
headerBox
)和页脚(footerBox
)元(不应该滚动) - 内容区域包含一个顶部(宽度为100%,
contentBoxMap
),其可以在整个内容区域被expanned元件 - 左(
contentBoxLeft
)和右(contentBoxRight
)内容元素的顶部内容元素(contentBoxMap
) 下方10
- 正确的内容元素(
contentBoxRight
)应该展开到底部并在有溢出时滚动。
我想出了一个solution [jsbin],几乎可以工作。在页脚下面流动的正确内容元素中存在一些溢出问题。参见下图为例: alt text http://img541.imageshack.us/img541/897/screenshot150206.png
问:
谁能告诉我如何解决溢出问题
contentBoxRight
?如果你能告诉我目前的解决方案有什么问题,我也很高兴。这甚至一个好办法做到这一点,考虑浏览器的兼容性?最后,在IE 7+,FF 3+,Safari 3+上看起来应该是一样的。 IE6和歌剧应该看起来不错,但它不是问题,如果它不同。
感谢您的任何提示。
答
您可以在#contentBoxRight
中删除属性height:100%;
,然后修复#contentBox
的蓝色背景。
+0
就是这样,谢谢。 – Haes 2010-08-13 14:27:53
为什么你不只是使用'位置:fixed'内容区域(S)呢? – igor 2010-08-13 13:27:55
@igor:没有'position:fixed',只是'绝对'。原因是使它也适用于IE6,但这只是最初的想法。我还没有在IE6上测试它。 – Haes 2010-08-13 14:29:25
..是的,有一个'位置:固定;'! http://www.w3schools.com/Css/pr_class_position.asp – Hristo 2010-08-13 18:26:35