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

Question

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

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

我很欣赏一个干净的跨浏览器解决方案,但万一不可能,CSS黑客会这样做.

这是奖金.我一直在努力的另一个结构,并最终使用表或JavaScript.它略有不同,但引入了新的问题.我一直主要在基于jQuery的窗口系统中使用它,但我想保持布局不受脚本限制,只能控制一个元素(中间元素)的大小.

Answer 1

我偶然发现的新方式:csscalc():

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

来源:css宽度100%减去100px

Answer 2

您可以使用嵌套元素和填充来获取工具栏上的左右边缘.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 3

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

输出：

<div class="container">
  <div class="fixed-width">
    1
  </div>
  <div class="flexible-width">
    2
  </div>
  <div class="fixed-width">
    3
  </div>
</div>

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

动态高度：

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

Answer 4

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

请享用!