2个元素填充剩余高度

Question

我的中间有一个div，里面有内容。

我希望顶部和底部的div填充剩余的空间。

像this

这样的东西

%timeit df.groupby(['company', 'partner']).size().unstack(fill_value=0).astype(bool).rename_axis(None, 1).reset_index()
%timeit pd.crosstab(df.company, df.partner).astype(bool).rename_axis(None, 1).reset_index()

%%timeit
f1, u1 = pd.factorize(df.company.values)
f2, u2 = pd.factorize(df.partner.values)
n, m = u1.size, u2.size

b = np.bincount(f1 * m + f2)
pad = np.zeros(n * m - b.size, dtype=int)
b = np.append(b, pad)
v = b.reshape(n, m).astype(bool)

pd.DataFrame(np.column_stack([u1, v]), columns=np.append('company', u2))

1000 loops, best of 3: 1.67 ms per loop
100 loops, best of 3: 5.97 ms per loop
1000 loops, best of 3: 301 µs per loop

如果可能的话，我希望设置顶部和底部容器的最小高度。

Answer 1

使用flexbox，你可以做到这一点

＆＃13;

＆＃13;

html, body {
  margin: 0;
}
body {
  display: flex;            /*  IE fix  */
}
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;              /*  IE fix  */
}
.top, .bottom {
  flex: 1;                  /*  fill remaining space  */
  background: lightblue;
}
.middle {
  background: lightgreen;
}

＆＃13;

<div class="container">
    <div class="top">

    </div>
    <div class="middle">
        Content
    </div>
    <div class="bottom">

    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果您需要，还可以向min-height / top元素添加bottom

＆＃13;

＆＃13;

html, body {
  margin: 0;
}
body {
  display: flex;            /*  IE fix  */
}
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;              /*  IE fix  */
}
.top, .bottom {
  flex: 1;                  /*  fill remaining space  */
  background: lightblue;
  min-height: 200px;        /*  set a min-height  */
}
.middle {
  background: lightgreen;
}

＆＃13;

<div class="container">
    <div class="top">

    </div>
    <div class="middle">
        Content
    </div>
    <div class="bottom">

    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

.top{
 min-height:100px;
}
.bottom{
 min-height:100px;
}

或者你可以使用不同的meseurment - 比如vh - 用于视图高度等等 忘了添加 - 它会进入你的css文件

Answer 3

这是一个适用于所有纯粹主义者的表格解决方案。

html, body {
  margin: 0;
  height:100%;
}
.container {
  display: table;
  height: 100%;
  width: 100%;
}
.container > div {
  display: table-row;
}
.table-cell {
  display: table-cell;
}
.top, .bottom {
  background: #ADD8E6;
}
.middle {
  background: #90EE90;
  height:1px;
}

<div class="container">
  <div class="top">
    <div class="table-cell">

    </div>
  </div>
  <div class="middle">
    <div class="table-cell">
      Content
    </div>
  </div>
  <div class="bottom">
    <div class="table-cell">

    </div>
  </div>
</div>