使用display：table-cell在父div中拉伸div

Question

我在父div中有一个div。父div的显示设置为table-cell，并且没有固定的大小。

我需要子div在整个父div中伸展，但是我需要父div来保持它的大小而不是伸展自己。

这是我的代码（简单内联CSS）：

<div style="display:table;">
  <div style="display:table-cell;"></div>
  <div style="display:table-cell; width: 600px;">Content</div>
  <div id="parent" style="display:table-cell;">
    <div id="child"></div> <!-- I need to stretch this across the entire parent -->
  </div>
</div>

这基本上就是我想要实现的目标：

换句话说：一行中有三个div，中间有一个固定大小，另一个伸展到浏览器窗口的末尾。我需要能够将内容添加到正确的div ，而确保正确的div不会在我添加内容时调整大小。

Answer 1

Flexbox可以做到这一点。

＆＃13;

＆＃13;

.parent {
  display: flex;
  height: 200px;
}
.child {
  flex: 1;
  background: lightgrey;
}
.child.fixed {
  flex: 0 0 600px;
  background: blue;
}

＆＃13;

<div class="parent">
  <div class="child"></div>
  <div class="child fixed"></div>
  <div class="child"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

或者如果您必须使用CSS表格 - Codepen Demo

＆＃13;

＆＃13;

.parent {
  display: table;
  height: 200px;
  width: 100%;
  table-layout: fixed;
}
.child {
  display: table-cell;
  background: lightgrey;
}
.child.fixed {
  width: 600px;
  background: blue;
}

＆＃13;

<div class="parent">
  <div class="child"></div>
  <div class="child fixed"></div>
  <div class="child"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

HTML：

<div class="browser-window">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

CSS：

.browser-window {
  width: 100%;
  height: 100px;
  background-color: black;
  display: table;
}
.left, .middle, .right {
  display: table-cell;
  height: 100%;
}
.middle {
  width: 60px;
  background-color: green;
}

https://jsfiddle.net/6gzegpzx/