html - 具有透明边框图像的容器的CSS样式

想做一个页面布局，如下面的图片。有三个主要组成部分，frameleft、framemid和frameright。虽然framemid包含页面内容，但其他两个组件只是带有透明.png文件的边框。
问题是如何使用frameleft使frameright和framemid正确缩放？我发现前面提出过一个类似的问题，但是当侧边组件中的图像是透明的时，下面的答案描述的技术（根本不能解决问题）不适用。
到目前为止，我的解决方案依赖于将这些组件放在div中并手动设置其高度。很明显这不是最优的，因为我希望整个系综都能从framemid中推断出这个高度。
HTML将三个组件包含在具有预定义高度的div中。

<div style="height: 500px">
    <div class="frameside frameleft"></div>
    <div class="framemid"> some content </div>
    <div class="frameside frameright"></div>
</div>

CSS根据外壳组件缩放侧图像。

.frameside {
    background-repeat: repeat-y;
    float: left;
    width: 10px;
    height: 100%;
}

.frameleft { background-image: url("frame_left.png"); }

.frameright { background-image: url("frame_right.png"); }

.framemid {
    width: 500px;
    float: left;
}

我宁愿不接受CSS3或HTML5解决方案/技巧，因为这必须适用于大多数浏览器。
编辑
如需可播放版本，请参阅Warface提供的here。

最佳答案

除了背景，还有什么东西需要放在左边/右边吗？–三十点
@三十点也许在
未来-“是的”，但现在让我们说“不”。
如果东西可能需要放进去，这是一个选项：http://jsfiddle.net/M5UqW/（尝试调整窗口大小）
它可以在IE7+和所有现代浏览器中工作。
HTML格式：

<div class="frameouter">
    <div class="frameside frameleft"></div>
    <div class="framemid">content</div>
    <div class="frameside frameright"></div>
</div>

CSS:

.frameouter {
    border: 2px solid #444;
    overflow: hidden;
    position: relative
}
.frameside {
    background-repeat: repeat-y;
    width: 10px;
    position: absolute;
    top: 0;
    bottom: 0
}
.frameleft {
    background-image: url(http://dummyimage.com/64x64/f0f/fff);
    left: 0
}
.frameright {
    background-image: url(http://dummyimage.com/64x64/00f/fff);
    right: 0
}
.framemid {
    margin: 0 10px;
    background: #ccc
}

关于html - 具有透明边框图像的容器的CSS样式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6769918/