Question

我有一个简单的HTML文档。我有header，section和div（包含未知数量的其他divs）。

标题和部分没有（也不能）设置高度。他们的身高来自内容。只知道它们的宽度（设置为100％）。

使用flexbox或其他方法，是否有可能让每个孩子divs，在这种情况下class="fill"为身体的高度 - 减去标题和部分

换句话说，当有人进入页面时，我希望他们看到标题和部分，然后让第一个div.fill一直到达底部，迫使他们滚动查看下一个div（但不滚动以查看第一个孩子div的底部）。

我正在使用模板系统，不幸的是HTML的结构无法改变，我只想在CSS中这样做。

＆＃13;

<html>
  <body>
      <header> Header content, might contain an image</header>
      <section> This is the sub header, unknown height </section>
      <div class="container">
        <div class="fill">I Want</div>
        <div class="fill">Each of These</div>
        <div class="fill">To be </div>
        <div class="fill">The height of the body - the Header - the Section</div>
      </div>
  </body>
</html>

＆＃13;

Answer 1

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
}

.container {
  flex: 1;                   /* 1 */
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
}

.fill { flex: 0 0 100%; }    /* 2 */

header  { background-color: aqua; }
section { background-color: orange; }
.fill:nth-child(odd) { background-color: yellow; }
.fill:nth-child(even) { background-color: lightgreen; }

<body>
  <header> Header content, might contain an image</header>
  <section> This is the sub header, unknown height </section>
  <div class="container">
    <div class="fill">I Want</div>
    <div class="fill">Each of These</div>
    <div class="fill">To be </div>
    <div class="fill">The height of the body - the Header - the Section</div>
  </div>
</body>

jsFiddle

注意：

flex-grow: 1的{{1}}组件告诉flex: 1元素（.container的弹性项子项）消耗所有剩余空间。这会导致body占用.container和header未消耗的任何空间。
section的{{1}}组件告诉flex-basis: 100%项（flex: 0 0 100%的子项目的子项）消耗父项的100％高度。所以这些项目总是在父项上占据.fill的全高。

因为默认情况下设置了flex项以缩小以便不溢出容器，所以在.container规则中使用flex-grow: 1设置了覆盖。这会禁用收缩功能，并允许项目保持固定在100％高度。（否则，无论定义的flex-shrink: 0 / flex: 0 0 100%如何，项目都会均匀收缩以防止溢出。请参阅demo。）

Answer 2

如果你稍微改变元素的结构，你只能用css来获得它基本上在容器中添加标题和节的第一个.fill元素（让我们称之为first）。对于其他div，请使用height: 100vh

＆＃13;

body {
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.fill {
  height: 100vh;
  overflow: auto;
}

.first {
  flex: 1;
}

header { background-color: aqua; }
section { background-color: orange; }
.first, .fill:nth-child(odd) { background-color: yellow; }
.fill:nth-child(even) { background-color: lightgreen; }

＆＃13;

<html>
<body>
  <div class="container">
    <header> Header content, might contain an image</header>
    <section> This is the sub header, unknown height </section>
    <div class="first">I Want</div>
  </div>
  <div class="fill">Each of These</div>
  <div class="fill">To be </div>
  <div class="fill">The height of the body - the Header - the Section</div>

</body>
</html>

＆＃13;

使元素填充剩余空间

2 个答案:

jsFiddle