Question

采取以下方案：

<div class="container" height="500px">
    <div>This div is responsive, so the height is variable</div>
    <div>This div need to fill the remaining vertical space in the container</div>
</div>

我们不再支持IE8或IE9，因此Flexbox可用。我知道如何使用当前的flexbox规范来实现这一点，但是因为Android（最多4.4）是新的IE，并且使用了2009规范，我不确定是否以及如何做到这一点。

任何flexbox大师都有答案吗？

Answer 1

容器上的

display:flex和flex-direction:column

flex:1在最后一个div。

＆＃13;

.container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  border: 1px solid grey;
  height: 200px;
  /* shortened for demo */
  margin-bottom: 1em;
  background: pink;
}
div:last-child {
  background: lightblue;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

＆＃13;

<div class="container">
  <div>This div is responsive, so the height is variable</div>
  <div>This div need to fill the remaining vertical space in the container</div>
</div>

<div class="container">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam accusamus eaque nihil veniam deleniti necessitatibus aliquid, earum unde veritatis expedita ullam neque ut vero quidem perspiciatis minima in quia quisquam aliquam, cupiditate enim impedit
    minus delectus, eum, doloribus. Hic iure esse, est autem cumque ullam odio beatae animi perspiciatis ad quibusdam nobis enim, libero adipisci</div>
  <div>This div need to fill the remaining vertical space in the container</div>
</div>

＆＃13;

Answer 2

您需要使用2009规范的遗留代码。 flex-direction: column维护项目的垂直顺序。

flex: 1这是flex-grow: 1 and flex-shrink: 1的简写，在第二个孩子上将展开它并利用剩余的高度。

这是一个非常方便的工具：Echoplex Flexyboxes来生成遗留代码。

＆＃13;

.container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 500px;
}
.first {
  background: lightblue;
}
.second {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  background: tomato;
}

＆＃13;

<div class="container">
  <div class="first">This div is responsive, so the height is variable</div>
  <div class="second">This div need to fill the remaining vertical space in the container</div>
</div>
<br>
<div class="container">
  <div class="first">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  <div class="second">This div need to fill the remaining vertical space in the container</div>
</div>

＆＃13;

使用Flexbox填充DIV下方的可变空间

2 个答案: