Div宽度100％减去固定的像素数量
如何在不使用表格或JavaScript的情况下实现以下结构？ 白色边框表示div的边缘，与问题无关。
中间区域的大小会有所不同，但是会有精确的像素值，整个结构应该根据这些值进行缩放。 为了简化它，我需要一种方法来设置“100％-n px”宽度的顶部中间和底部中间的div。
我会很感激一个干净的跨浏览器解决scheme，但万一这是不可能的，CSS黑客会做。
这是一个奖金。 另一个结构我一直在努力，最终使用表或JavaScript。 略有不同，但引入了新的问题。 我一直主要在基于jQuery的窗口系统中使用它，但我想保持布局不在脚本中，只控制一个元素（中间的）的大小。
您可以使用嵌套元素和填充来获取工具栏上的左侧和右侧边缘。 div元素的默认宽度是auto ，这意味着它使用可用的宽度。 然后你可以添加填充到元素，它仍然保持在可用的宽度。
这里是一个例子，你可以用来把图像作为左右圆angular，以及在它们之间重复的中心图像。
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％”属性。 input，表格，可能还有其他的需要你把它们包装在一个容器div中，并添加一些CSS来恢复这个质量。 如果你不幸在这种情况下，联系我，我会挖起来的CSS。
jsfiddle在这里： jsfiddle.net/RgdeQ
请享用！
通常的做法就像Guffa所描述的嵌套元素一样。 有一点让人伤心，不得不添加额外的标记来获得你需要的钩子，但实际上在这里或那里的包装div不会伤害任何人。
如果你必须没有额外的元素（例如，当你没有控制页面标记），你可以使用框大小 ，它有相当不错的，但不完整或简单的浏览器支持。 虽然可能比依靠脚本更有趣。
如果你的包装div是100％，而你使用填充像素数量，那么如果填充＃需要dynamic，你可以很容易地使用jQuery来修改你的填充量，当你的事件触发。
也许我是愚蠢的，但是不是在这里明显的解决scheme吗？
<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％，将宽度设置为一个百分比值修复它虽然。
您可以使用Flexbox布局。 您需要在需要具有dynamic宽度或高度flex-direction: row and column的元素上分别设置flex: 1 flex-direction: row and column 。
dynamic宽度：
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 ie flex-grow: 1 and flex-shrink: 1*/ }
输出：
.container { display: flex; width: 100%; color: #fff; font-family: Roboto; } .fixed-width { background: #9BCB3C; width: 200px; /* Fixed width */ text-align: center; } .flexible-width { background: #88BEF5; flex: 1; /* Stretch to occupy remaining width */ text-align: center; }
<div class="container"> <div class="fixed-width"> 1 </div> <div class="flexible-width"> 2 </div> <div class="fixed-width"> 3 </div> </div>
我们可以很容易地使用弹性盒来实现这一点。
如果我们有三个元素像Header，MiddleContainer和Footer。 而我们想要给Header和Footer一些固定的高度。 那么我们可以这样写：
对于React / RN（默认是'显示'为flex和'flexDirection'为列），在web css中，我们必须指定包含这些显示的主体容器或容器：'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, }
在某些情况下，您可以利用边距设置来有效指定“100％宽度减N像素”。 看到这个问题被接受的答案。
我有一个类似的问题，我想在屏幕顶部的横幅有一个图像在左边，重复的图像在右边的屏幕边缘。 我最终解决了这个问题：
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。
