CSS Multiple Divs设置为100%高度

时间:2010-06-14 20:12:26

标签: css html height

我理解这个问题是多余的,但我无法在此处和其他在线论坛上找到我的搜索答案。这是我的情况。

http://www.ci.fayetteville.nc.us/CityCommon/port/contact.html

在该页面上,我有一个“分隔符”行,它将延伸到页面底部。现在,我已经投入了大量的break标签来拉伸页面。这表明背景图像(在某种程度上用作页脚图像)可以很好地延伸到页面底部。 (该图像包含在div#content中。

我的问题是我怎么能另外让我的div#rightContent以同样的方式伸展?

我的html,body和容器高度都是100%,另一个是#content的容器div。我很难过。

在链接中,您可以查看我的来源,并希望指出我实现这一目标的良好方向。任何帮助将不胜感激。感谢。

2 个答案:

答案 0 :(得分:0)

制作一个包含外边框和右边分隔线的背景图像。这种技术被称为“人造柱”。

请参阅:http://www.alistapart.com/articles/fauxcolumns/http://en.wikipedia.org/wiki/Faux_columns

答案 1 :(得分:0)

有各种CSS黑客可以获得相同的列高度。感觉'标准'的唯一一个(恕我直言)是使用display:table,但这在IE中不起作用(当然),所以不太理想。

因此,我发现效果最好的解决方案是一些JavaScript。您已经在使用jQuery,这样可以更轻松。这是一个示例解决方案:

http://www.cssnewbie.com/equal-height-columns-with-jquery/