Div 宽度 100% 减去固定像素数

Question

如何在不使用表格或 JavaScript 的情况下实现以下结构？白色边框代表 div 的边缘，与问题无关。

中间区域的大小会有所不同，但它将具有精确的像素值，并且整个结构应根据这些值进行缩放。为了简化它，我需要一种方法来将“100% - n px”宽度设置为顶部中间和底部中间的 div。

我希望有一个干净的跨浏览器解决方案，但如果不可能，CSS hacks 也可以。

这是一个奖金。我一直在努力研究另一种结构，最终使用了表格或 JavaScript。它略有不同，但引入了新问题。我主要在基于 jQuery 的窗口系统中使用它，但我想将布局保留在脚本之外，并且只控制一个元素（中间的元素）的大小。

Answer 1

可以使用嵌套元素和填充以获得工具栏上的左，右边缘。一个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;
}

Answer 2

新的方式我只是偶然发现了： CSS calc() ：

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

来源：的 CSS宽度100％减去100px的

Answer 3

虽然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的嵌套在此元素的层次结构是更自然，更好地代表什么网页上。正因为如此，边框，填充，和余量可以通常适用于所有元素。（即：这种“自然性”超越风格并具有后果）

请注意，这仅适用于divs和共享其“填充由默认的宽度的100％”属性的其他元素。输入，表格和其它可能会要求你将它们包装在一个div容器，并添加更多一点的CSS来恢复这种品质。如果你非常不幸地是在这种情况下，与我联系，我会来挖了CSS。

的jsfiddle这里： jsfiddle.net/RgdeQ

享受！

Answer 4

您可以使用 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*/
}

<强>输出：

.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>