Question

我有这样的布局：

$("html, body").animate({ scrollTop: prev.offset().top - 50, queue: false }, 300);

$("html, body").animate({ scrollTop: next.offset().top, queue: false }, 300);

和css for it：

<div class="flexbox">
  <div class="header"></div>
  <div class="main"></div>
  <div class="footer"></div>
</div>

上面

html,
body {
  height: 100%;
}
.flexbox {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: flex-start;
  height: 100%;
  width: 100%;
}
.flexbox .main {
  order: 0;
  flex: 1 1 auto;
  align-self: stretch;
}
.flexbox .header,
.flexbox .footer {
  order: 0;
  flex: 0 1 auto;
  align-self: stretch;
}

列中的

被拉伸100％.main，所有这一切都很完美，现在height内添加了.flexbox-row：

.main

和css：

<div class="flexbox">
  <div class="header"></div>
  <div class="main">
    <div class="flexbox-row">
      <div class="first"></div>
      <div class="second"></div>
      <div class="third"></div>
    </div>
  </div>
  <div class="footer"></div>
</div>

但由于某种原因.flexbox-row { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-content: stretch; align-items: flex-start; } .flexbox-row .first, .flexbox-row .second, .flexbox-row .third { order: 0; flex: 0 1 auto; align-self: stretch; } .flexbox-row .second { order: 0; flex: 1 1 auto; align-self: stretch; }列，第二个列不再在.main中延伸100％。

以下是jsbin演示

Answer 1

将height:100%添加到.flexbox-row

我简化了你的规则，那里有不必要的属性。

html,
body {
  height: 100%;
  margin: 0
}
.flexbox {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%;
  width: 100%;
}
.flexbox .main {
  flex: 1;
  background: red
}
.flexbox .header,
.flexbox .footer {
  background: green;
  padding:1em
}
.flexbox-row {
  display: flex;
  height: 100%;
}
.flexbox-row .first,
.flexbox-row .second,
.flexbox-row .third {
  background: #C9E1F4;
  padding: 1em;
}
.flexbox-row .second {
  flex: 1;
  background: #A8EDAC
}

<div class="flexbox">
  <div class="header">Header</div>
  <div class="main">
    <div class="flexbox-row">
      <div class="first">First</div>
      <div class="second">Main</div>
      <div class="third">Third</div>
    </div>
  </div>
  <div class="footer">Footer</div>
</div>

<强>更新

在Chrome和Safari中，（非弯曲）儿童的高度不是以百分比表示。但Firefox和IE识别和扩展孩子们基于百分比的高度。

Source

因此，解决方法是将.position:relative添加到.main和position:absolute，width / height:100%添加到.flexbox-row

html,
body {
  height: 100%;
  margin: 0
}
.flexbox {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%;
  width: 100%
}
.flexbox .main {
  flex: 1;
  background: red;
  position: relative
}
.flexbox .header,
.flexbox .footer {
  background: green;
  padding: 1em
}
.flexbox-row {
  display: flex;
  position:absolute;
  height: 100%;
  width: 100%
}
.flexbox-row .first,
.flexbox-row .second,
.flexbox-row .third {
  background: #C9E1F4;
  padding: 1em;
}
.flexbox-row .second {
  flex: 1;
  background: #A8EDAC
}

<div class="flexbox">
  <div class="header">Header</div>
  <div class="main">
    <div class="flexbox-row">
      <div class="first">First</div>
      <div class="second">Main</div>
      <div class="third">Third</div>
    </div>
  </div>
  <div class="footer">Footer</div>
</div>

Flexbox行在flexbox列中

1 个答案: