Div宽度减去固定数量的像素
如何在不使用表格或JavaScript的情况下实现以下结构？ 白色边框表示div的边缘，与问题无关。
中间区域的大小会有所不同，但它会有精确的像素值，整个结构应根据这些值进行缩放。 为了简化它，我需要一种方法将“100％ - n px”宽度设置为顶部中间和底部中间的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;
}
新的方式，我只是偶然发现：css calc() ：
.calculated-width {
width: -webkit-calc(100% - 100px);
width: -moz-calc(100% - 100px);
width: calc(100% - 100px);
}
来源： css宽度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
请享用！
链接地址: http://www.djcxy.com/p/29999.html