jquery - 具有自定义背景图像的可变高度 div - 最好的技术是什么？

Question

我想生成类似 apple.com 主页底部的 4 个方框的内容，但我希望它们是可变高度。

我能想到的最简单的技术是拥有两个 div。第一个包含其背景图像中除底部“cap”之外的所有内容，第二个 div 带有底部 cap，如下所示:

<div class="top-and-middle">
</div>
<div class="bottom">
</div>

/-----------------\   ^
|                 |   |
|                 |   |
| top-and-middle  |   | <this height can stretch
|                 |   |
|                 |   v
-------------------
|      bottom     |
\-----------------/

但这在我看来不是那么优雅..有更好的方法吗？也许只有一个div？最好只使用 CSS，但也可能使用 PHP 或 Jquery。

Answer 1

如今常用的技术是嵌套 div，而不是分离。每个都有自己的背景图像，一个顶部对齐，一个底部对齐，内部(正面)背景不重复，另一个(背面)背景高度足以适应任何合理的 div 高度。

<div class="box"><div class="wrap">
    content
</div></div>

.box { background: url(/img/box-top-and-middle.png) top left no-repeat; }
.box .wrap { background: url(/img/box-bottom.png) bottom left no-repeat; }

这样做的好处是您可以更轻松地在内容下方设置边缘背景。

这被推广为‘sliding doors ’ 用于水平情况(尽管该技术在那篇文章之前肯定已经在使用)。各种其他组合，例如三个嵌套的 div 具有重复的主背景和单独的侧面图像，在病态的情况下，所有侧面都有 9 深的 div 嵌套(在实践中你永远不需要这个)。

好消息是，在 CSS3 中，您可以在单个元素上拥有多个背景图像，无需任何额外的包装 div:

.box {
    background:
        url(/img/box-top-and-middle.png) top left no-repeat,
        url(/img/box-bottom.png) bottom left no-repeat;
}

这是漂亮的 Backgrounds and Borders 的一部分模块。不幸的是，在即将推出的第 9 版之前，IE 不支持它，因此如果您不介意它在当前 IE 版本和其他旧版浏览器中看起来不正常，您只能使用它。