CSS 多个 Div 设置为 100% 高度
我知道这个问题是多余的,但我无法从此处和其他在线论坛的搜索中找到答案。这是我的情况。
http://www.ci.fayetteville.nc.us/CityCommon/ port/contact.html
在该页面上,我有一条“分隔符”线,该线将延伸到页面底部。现在,我添加了大量的中断标签来扩展页面。这表明背景图像(在某种程度上用作页脚图像)很好地延伸到页面底部。 (该图像包含在 div#content 中。
我的问题是我怎样才能另外让我的 div#rightContent 以同样的方式拉伸?
我的 html、正文和容器高度都具体为 100%,以及另一个容器 div 称为#content。我很困惑。
您可以在链接中查看我的来源,并希望为我指明实现这一目标的好方向,谢谢。
I understand this question is redundant but I was unable to locate an answer from my searches on here and other online forums. Here is my situation.
http://www.ci.fayetteville.nc.us/CityCommon/port/contact.html
On that page I have a 'separator' line that is to extend to the bottom of the page. Now, I have thrown in plenty of break tags to stretch the page. This shows that the background image (used as a footer images in a way) stretches to the bottom of the page fine. (That image is contained within div#content.
My question is how can I additionally get my div#rightContent to stretch just the same way?
I have my html, body and container heights all specific at 100% as well as another container div called #content. I am pretty stumped.
At the link you can view my source and hopefully point me in a good direction to achieve this. Any help would be greatly appreciated. Thanks.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
制作一张包含外边框和右栏分隔线的背景图像。这种技术称为“假列”。
请参阅:http://www.alistapart.com/articles/fauxcolumns/ 和
http://en.wikipedia.org/wiki/Faux_columns
Make one background image that contains both the outer borders and the right-column divider. This technique is called "faux columns".
See: http://www.alistapart.com/articles/fauxcolumns/ and
http://en.wikipedia.org/wiki/Faux_columns
有多种 CSS hack 可以实现相同的列高。唯一一个(恕我直言)感觉“标准”的方法是使用 display: table,但这在 IE 中不起作用(当然),因此使其不太理想。
因此,我发现最有效的解决方案是使用一些 JavaScript。您已经在使用 jQuery,因此这将使它变得更加容易。这是一个示例解决方案:
http://www.cssnewbie.com/equal-高度列与 jquery/
There are various CSS hacks to get equal column heights. The only one (IMHO) that feels 'standard' is to use display: table, but that doesn't work in IE (of course) so makes it less ideal.
As such, I find the solution that works best is a bit of JavaScript. You are already using jQuery so that'll make it even easier. Here's one example solution:
http://www.cssnewbie.com/equal-height-columns-with-jquery/