如何在不使用表或JavaScript的情况下实现以下结构?白色边界代表div的边缘，与问题无关。
中间区域的大小会有所变化，但它会有精确的像素值，整个结构应该根据这些值缩放。为了简化它，我需要一种方法来设置“100% - n像素”的宽度为上-中和下-中div。
我很欣赏一个干净的跨浏览器解决方案，但如果不可能，CSS黑客也可以。
这里有个奖励。另一种结构我一直在挣扎，最终使用表格或JavaScript。它略有不同，但引入了新的问题。我主要是在基于jquery的窗口系统中使用它，但我想保持脚本的布局，只控制一个元素的大小(中间的一个)。
当前回答
可以使用嵌套元素和填充来获得工具栏上的左右边。div元素的默认宽度是auto，这意味着它使用可用宽度。然后，您可以添加填充元素，它仍然保持在可用的宽度。
下面是一个示例，您可以使用它将图像作为左右圆角，以及在它们之间重复的中心图像。
HTML:
<div class="Header">
<div>
<div>This is the dynamic center area</div>
</div>
</div>
CSS:
.Header {
background: url(left.gif) no-repeat;
padding-left: 30px;
}
.Header div {
background: url(right.gif) top right no-repeat;
padding-right: 30px;
}
.Header div div {
background: url(center.gif) repeat-x;
padding: 0;
height: 30px;
}
其他回答
如果你的包装div是100%，你使用填充像素量，那么如果填充#需要是动态的，你可以很容易地使用jQuery修改你的填充量当你的事件触发。
在某些情况下，你可以利用边距设置来有效地指定“100%宽度减去N像素”。请看这个问题的公认答案。
可以使用嵌套元素和填充来获得工具栏上的左右边。div元素的默认宽度是auto，这意味着它使用可用宽度。然后，您可以添加填充元素，它仍然保持在可用的宽度。
下面是一个示例，您可以使用它将图像作为左右圆角，以及在它们之间重复的中心图像。
HTML:
<div class="Header">
<div>
<div>This is the dynamic center area</div>
</div>
</div>
CSS:
.Header {
background: url(left.gif) no-repeat;
padding-left: 30px;
}
.Header div {
background: url(right.gif) top right no-repeat;
padding-right: 30px;
}
.Header div div {
background: url(center.gif) repeat-x;
padding: 0;
height: 30px;
}
通常的方法是Guffa所概述的嵌套元素。不得不添加额外的标记来获得所需的钩子，这有点令人遗憾，但在实践中，这里或那里的包装器div不会伤害任何人。
如果你必须这样做没有额外的元素(例如。当您无法控制页面标记时)，您可以使用box-sizing，它具有相当不错但不完整或简单的浏览器支持。可能比依赖脚本更有趣。
我也遇到过类似的问题，即我想要在屏幕顶部设置一个横幅，该横幅的左边有一个图像，而右边的屏幕边缘则有一个重复的图像。最后我是这样解决的:
CSS:
.banner_left {
position: absolute;
top: 0px;
left: 0px;
width: 131px;
height: 150px;
background-image: url("left_image.jpg");
background-repeat: no-repeat;
}
.banner_right {
position: absolute;
top: 0px;
left: 131px;
right: 0px;
height: 150px;
background-image: url("right_repeating_image.jpg");
background-repeat: repeat-x;
background-position: top left;
}
钥匙是正确的标签。我基本上指定我想让它从左边131px到右边0px重复。
