我有一个稍微不寻常的要求，我真的很挣扎。我创建了一个图像来说明我正在尝试做的事情：
基本上这是一个由 3 个区域组成的 DIV - 顶部、中间和底部。所有 3 个区域都有背景图像，我需要中间区域（包括其边框的蓝色位）来扩展内容。所以内容越多，中间区域就越大。问题是内容实际上需要覆盖整个 DIV 而不仅仅是中间区域。
这就是我目前所拥有的：
HTML：
<div id="panel">
<div id="top"></div>
<div id="middle">
<div id="content">
Lorem ipsum, etc...
</div>
</div>
<div id="bottom"></div>
</div>
CSS：
#panel {
float: left;
width: 300px;
position: relative;
}
#top {
position: absolute;
left: 0;
top: 0;
height: 100px;
width: 100%;
background: url(top.png) no-repeat;
}
#middle {
float: left;
margin-top: 100px;
width: 100%;
min-height: 200px;
background: url(middle.png) repeat-y;
}
#bottom {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
background: url(bottom.png) no-repeat;
}
这实际上不起作用，并且可能是不正确的方法。有人有什么想法吗？
