展开元素以适应表格单元格中的其余容器

Question

我想知道是否可以在不使用JavaScript的情况下将另一个元素中的容器扩展到其父高度。

这是一个简单的例子来证明我的意思：

HTML：

<div id="left">Left</div>
<div id="middle">
    middle
    <div id="container">This should fill up the rest of the #middle div</div>
</div>
<div id="right">Left<br><br><br><br><br><br>This one is longer than the #middle</div>

CSS：

#left, #middle, #right { 
    display: table-cell; 
    background: #eee;  
    border: #ccc 1px solid; 
}

#container { background: red; }

jsfiddle

我找不到解决方案。有什么想法吗？

Answer 1

将display:inline-flex;和height:100%;添加到#container即可。对你要填充整个空间的任何DIV都做同样的事情。

#left, #middle, #right { 
    display: table-cell; 
    background: #eee;  
    border: #ccc 1px solid; 
}

#container { 
    background: red;
    display: inline-flex;
    height: 100%;
}

<div id="left">Left</div>
<div id="middle">
    middle
    <div id="container">This should fill up the rest of the #middle div</div>
</div>
<div id="right">Left<br><br><br><br><br><br>This one is longer than the #middle</div>

Answer 2

只需将display:table-cell;替换为外部弹性框，即允许中间列为垂直弹性框，这反过来又支持您想要实现的自动增长。

body {display: flex;}
#middle {display: flex;flex-direction: column;}
#container {background-color:red;flex-grow:1;}

Answer 3

你必须将#middle和绝对位置的相对位置设置为#container，并且还要设置#containner的顶部和底部，之后你还必须设置中间的宽度。

＆＃13;

＆＃13;

#left,
#middle,
#right {
  display: table-cell;
  background: #eee;
  border: #ccc 1px solid;
}
#container {
  background: red;
  top: 13%;
  height:86%;
}
#middle {
  width: 200px;
  height:128px;
}

＆＃13;

<div id="left">Left</div>
<div id="middle">
  middle
  <div id="container">This should fill up the rest of the #middle div</div>
</div>
<div id="right">Left
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>This one is longer than the #middle</div>

＆＃13;

＆＃13;

＆＃13;

<强> Editted

我更新了上面的代码，它与任何元素的位置风格无关。

Answer 4

如果它纯粹是视觉上的你可以转动bg颜色：

集

#middle {
    background: red
}

和

#middle-top {
    width: 100%;
    background: #eee
}

这样看起来底部部分正在填补其余部分，但你只需将顶部设置为与其余部分相同。 ;）

这里是完整的代码段：或pen

#left, #middle, #right { 
    display: table-cell; 
    background: #eee;  
    border: #ccc 1px solid; 
}

#middle {
    background: red
}

#middle-top {
    width: 100%;
    background: #eee
}

<div id="left">Left</div>
<div id="middle">
  <div id="middle-top">middle</div>
  This should fill up the rest of the #middle div
</div>
<div id="right">Left<br><br><br><br><br><br>This one is longer than the #middle</div>