在不使用表或JavaScript的情况下如何实现以下结构？白色边框代表div的边缘，与问题无关。
中间区域的大小将有所变化，但将具有精确的像素值，并且整个结构应根据这些值缩放。为了简化它，我需要一种方法来将“ 100％-n px”宽度设置为顶部-中间和底部-中间div。
我希望能使用一个干净的跨浏览器解决方案，但如果不可能，CSS hacks会做。
这是奖金。我一直在努力并最终使用表或JavaScript的另一种结构。稍有不同，但是引入了新的问题。我主要在基于jQuery的窗口系统中使用它，但是我想使布局不在脚本中，而仅控制一个元素（中间一个）的大小。
Answers:
您可以使用嵌套元素和填充来获得工具栏上的左右边缘。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;
}>操作员的支持仍然不够可靠时，就会写出答案。
calcIE 8或当前版本的Anroid Browser或Opera 不支持。caniuse.com/#search=calc
我刚刚偶然发现的新方法：csscalc()：
.calculated-width {
width: -webkit-calc(100% - 100px);
width: -moz-calc(100% - 100px);
width: calc(100% - 100px);
}尽管Guffa的答案在很多情况下都有效，但在某些情况下，您可能不希望左侧和/或右侧填充物成为中心div的父级。在这些情况下，可以在中心使用块格式上下文，并向左右浮动填充div。这是代码
HTML：
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>CSS：
.container {
width: 100px;
height: 20px;
}
.left, .right {
width: 20px;
height: 100%;
float: left;
background: black;
}
.right {
float: right;
}
.center {
overflow: auto;
height: 100%;
background: blue;
}我觉得与嵌套的div相比，此元素层次结构更自然，并且可以更好地表示页面上的内容。因此，可以将边框，填充和边距正常应用于所有元素（即：这种“自然”超出了样式并具有分枝）。
请注意，这仅适用于div和其他共享“默认填充宽度为100％”属性的元素。输入，表和其他可能需要将它们包装在容器div中并添加更多的CSS来恢复这种质量。如果您很不幸遇到这种情况，请与我联系，我将深入研究CSS。
jsfiddle在这里：jsfiddle.net/RgdeQ
请享用！
您可以使用Flexbox布局。您需要设置flex: 1需要分别具有动态宽度或高度的元素flex-direction: row and column。
动态宽度：
的HTML
<div class="container">
<div class="fixed-width">
1
</div>
<div class="flexible-width">
2
</div>
<div class="fixed-width">
3
</div>
</div>的CSS
.container {
display: flex;
}
.fixed-width {
width: 200px; /* Fixed width or flex-basis: 200px */
}
.flexible-width {
flex: 1; /* Stretch to occupy remaining width i.e. flex-grow: 1 and flex-shrink: 1*/
}输出：
动态高度：
的HTML
<div class="container">
<div class="fixed-height">
1
</div>
<div class="flexible-height">
2
</div>
<div class="fixed-height">
3
</div>
</div>的CSS
.container {
display: flex;
}
.fixed-height {
height: 200px; /* Fixed height or flex-basis: 200px */
}
.flexible-height {
flex: 1; /* Stretch to occupy remaining height i.e. flex-grow: 1 and flex-shrink: 1*/
}输出：
嵌套元素通常是Guffa概述的方法。必须添加额外的标记来获得所需的钩子，这有点可悲，但实际上，这里的包装div还是不会伤害任何人。
如果您必须在没有额外元素的情况下执行此操作（例如，当您无法控制页面标记时），则可以使用box-sizing，它具有相当不错的功能，但不完全或简单地支持浏览器。虽然可能比依赖脚本更有趣。
也许我很笨，但是这里不是显而易见的解决方案吗？
<div class="parent">
<div class="fixed">
<div class="stretchToFit">
</div>
.parent{ display: table; width 100%; }
.fixed { display: table-cell; width: 150px; }
.stretchToFit{ display: table-cell; vertical-align: top}我在chrome中发现的另一种方法甚至更简单，但是，这真是一种黑客！
.fixed{
float: left
}
.stretchToFit{
display: table-cell;
width: 1%;
}就像表格单元格一样，仅此一项就应水平填充行的其余部分。但是，当它超过其父对象的100％时，会遇到一些奇怪的问题，但是将宽度设置为百分比值可以解决该问题。
我们可以使用flex-box轻松实现这一目标。
如果我们有三个元素，例如Header，MiddleContainer和Footer。而且我们想给页眉和页脚一些固定的高度。然后我们可以这样写：
对于React / RN（默认值为'display'作为flex，'flexDirection'作为列），在Web CSS中，我们必须指定主体容器或包含这些容器的容器作为display：'flex'，flex-direction：'column'如下所示：
container-containing-these-elements: {
display: flex,
flex-direction: column
}
header: {
height: 40,
},
middle-container: {
flex: 1, // this will take the rest of the space available.
},
footer: {
height: 100,
}如果您的换行div为100％，并且您使用填充为一个像素量，那么如果填充＃需要动态，您可以在事件触发时轻松地使用jQuery修改填充量。
我有一个类似的问题，我想要一个横幅横穿屏幕顶部，在屏幕边缘左侧有一个图像，右侧有一个重复图像。我最终像这样解决它：
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。