html - 如何设置几个嵌套div的相对位置？

假设我有一些像这样的div：

<div id="div0">
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
</div>

div0，div1和div3的高度固定。现在，我想让div2自动展开，以便它可以占用所有剩余空间。有没有办法做到这一点？
参见此http://codepen.io/anon/pen/XJorMb作为示例，我希望蓝色框位于中间并占用所有剩余空间。

最佳答案

您可以使用flex执行此操作：

#fixedPanel {
  position:fixed;
  width: 350px;
  height:150px;
  border-style: solid;
  border-width: 5px;
  display:flex;
  flex-direction:column;
}
#div1 {
  height: 20px;
  border-style: solid;
  border-width: 1px;
  border-color: red;
}
#div2 {
  flex:1;
  border-style: solid;
  border-width: 1px;
  border-color: blue;
}
#div3 {
  height: 20px;
  border-style: solid;
  border-width: 1px;
  border-color: green;
}

<div id="fixedPanel">
  <div id="div1"> 1 </div>
  <div id="div2"> 2 </div>
  <div id="div3"> 3 </div>
</div>

或display:table;

#fixedPanel {
  position:fixed;
  width: 350px;
  height:150px;
  border-style: solid;
  border-width: 5px;
  display:table;
  border-collapse:collapse;
}
#fixedPanel > div {
display:table-row;
}
#div1 {
  height: 20px;
  border-style: solid;
  border-width: 1px;
  border-color: red;
}
#div2 {
  height:100%;
  border-style: solid;
  border-width: 1px;
  border-color: blue;
}
#div3 {
  height: 20px;
  border-style: solid;
  border-width: 1px;
  border-color: green;
}

<div id="fixedPanel">
  <div id="div1"> 1 </div>
  <div id="div2"> 2 </div>
  <div id="div3"> 3 </div>
</div>

关于html - 如何设置几个嵌套div的相对位置？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29134411/