如何在不使用表或JavaScript的情况下实现以下结构?白色边界代表div的边缘，与问题无关。
中间区域的大小会有所变化，但它会有精确的像素值，整个结构应该根据这些值缩放。为了简化它，我需要一种方法来设置“100% - n像素”的宽度为上-中和下-中div。
我很欣赏一个干净的跨浏览器解决方案，但如果不可能，CSS黑客也可以。
这里有个奖励。另一种结构我一直在挣扎，最终使用表格或JavaScript。它略有不同，但引入了新的问题。我主要是在基于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重复。
其他回答
在某些情况下，你可以利用边距设置来有效地指定“100%宽度减去N像素”。请看这个问题的公认答案。
如果你的包装div是100%，你使用填充像素量，那么如果填充#需要是动态的，你可以很容易地使用jQuery修改你的填充量当你的事件触发。
虽然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
享受吧!
我们可以很容易地使用flex-box来实现这一点。
如果我们有三个元素，Header, MiddleContainer和Footer。我们想给页眉和页脚一些固定的高度。然后我们可以这样写:
对于React/RN(默认是'display' as flex和'flexDirection' as column)，在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,
}
我也遇到过类似的问题，即我想要在屏幕顶部设置一个横幅，该横幅的左边有一个图像，而右边的屏幕边缘则有一个重复的图像。最后我是这样解决的:
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重复。
