CSS 多个 Div 设置为 100% 高度

发布于 2024-09-05 10:52:41 字数 492 浏览 1 评论 0原文

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

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

痕至 2024-09-12 10:52:41

制作一张包含外边框和右栏分隔线的背景图像。这种技术称为“假列”。

请参阅: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

内心激荡 2024-09-12 10:52:41

有多种 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/

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文