如果你的包装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重复。

虽然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

享受吧!

我刚刚偶然发现的新方法:css calc():

.calculated-width {
    width: -webkit-calc(100% - 100px);
    width:    -moz-calc(100% - 100px);
    width:         calc(100% - 100px);
}​

css宽度100%减去100px

也许我有点傻，但桌子不是最明显的解决办法吗?

<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更简单，但人是一个hack!

.fixed{ 
   float: left
}
.stretchToFit{
   display: table-cell;
   width: 1%;
}

就像表格单元格一样，这应该水平填充行其余部分。然而，你会遇到一些奇怪的问题，它超过了它的父元素的100%，将宽度设置为百分比值可以解决这个问题。

你可以使用Flexbox布局。你需要在元素上分别设置flex-direction: row和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*/
}

输出:

.container { 显示:flex; 宽度:100%; 颜色:# fff; 字体类型:Roboto; ｝ .fixed-width { 背景:# 9 bcb3c; 宽度:200 px;/*固定宽度*/ text-align:中心; ｝ .flexible-width { 背景:# 88 bef5; flex: 1;/*拉伸占用剩余宽度*/ text-align:中心; ｝ < div class = "容器" > < div class = "固定宽度”> 1 < / div > < div class = " flexible-width”> 2 < / div > < div class = "固定宽度”> 3. < / div > < / div >

动态高度:

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*/
}

输出:

.container { display: flex; flex-direction: column; height: 100vh; color: #fff; font-family: Roboto; } .fixed-height { background: #9BCB3C; height: 50px; /* Fixed height or flex-basis: 100px */ text-align: center; display: flex; flex-direction: column; justify-content: center; } .flexible-height { background: #88BEF5; flex: 1; /* Stretch to occupy remaining width */ text-align: center; display: flex; flex-direction: column; justify-content: center; } <div class="container"> <div class="fixed-height"> 1 </div> <div class="flexible-height"> 2 </div> <div class="fixed-height"> 3 </div> </div>

我们可以很容易地使用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,
    }