Question

我无法弄清楚如何使这个页面有效。

我试图让“Top”成为标题，“Bottom”是页脚，“table”和“section”是两个独立的列。

虽然我无法弄明白。感谢。

html {
  height: 100%;
}
body {
  display: flex;
  height: 100%;
  justify-content: flex-start;
  align-content: flex-start;
  flex-direction: column;
  flex-wrap: wrap;
  margin: 0;
}
#pageTop {
  background-color: lightgrey;
  padding-left: 1em;
  padding-top: .5em;
  flex-grow: 1;
}
#table {
  background-color: blue;
  width: 50%;
  flex-grow: 8;
  flex-shrink: 1;
}
#pageSection {
  background-color: lightpink;
  width: 50%;
  flex-flow: 8;
  flex-shrink: 1;
}
#pageBot {
  flex-grow: 1;
  background-color: grey;
}

<body>
  <div id="pageTop">Top</div>
  <nav id="table">table</nav>
  <div id="pageSection">section</div>
  <div id="pagebot">Bottom</div>
</body>

Answer 1

像Micheal_B所说：

将#table和#section包装在一个容器中。该容器成为父Flex容器中的第二个flex项。然后将display: flex添加到新容器中。

更改

将main#pageContent添加到正文并将其包裹在nav#table和section#pageSection周围
- 添加了display: flex，justify-content: center和flex: 2 0 auto
将所有flex-grow和flex-shrink更改为flex速记。
- 离。 flex: 0 1 auto = flex-grow: 0 flex-shrink: 1 flex-basis: auto
- 记。上面的规则集是所有flex子目录的默认值。
已移除align-content和justify-content;并将flex-wrap的值从wrap更改为nowrap;并添加了overflow:hidden和width: 100%来规范化一点。
向所有内容添加了width: 100%，但#pageSection和#table除外。
将height: 2em添加到#pageTop和#pageBot（BTW，更正了拼写错误）
将所有标记更改为语义等价物。

`main#pageContent`

设置高度以占用页脚和标题离开height: calc(100% - 4em)的空闲空间。这可能有点过头了，因为它也有flex: 2 0 auto。
它是一个flex容器（flex: display）和一个flex子（flex: 2 0 auto）

`section#pageSection`

overflow-x: hidden可防止任何内容横向突破边框。 overflow-y:auto将通过添加滚动条来容纳扩展底部边框的任何内容。我添加了内容（一些<p>）来演示。

段

＆＃13;

html {
  height: 100%;
  width: 100%;
}
body {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  flex-wrap: nowrap;
  margin: 0;
  overflow: hidden;
}
#pageContent {
  width: 100%;
  height: calc(100% - 4em);
  display: flex;
  justify-content: center;
  flex: 2 0 auto;
}
#pageTop {
  width: 100%;
  height: 2em;
  background-color: violet;
  padding-left: 1em;
  padding-top: .5em;
  flex: 0 0 auto;
}
#table {
  background-color: cornflowerblue;
  width: 50%;
  flex: 0 0 auto;
}
#pageSection {
  background-color: darksalmon;
  width: 50%;
  flex: 1 0 auto;
  overflow-x: hidden;
  overflow-y: auto;
}
#pageBot {
  width: 100%;
  height: 2em;
  flex: 0 0 auto;
  background-color: gold;
}

＆＃13;

<body>
  <header id="pageTop">Top</header>
  <main id='pageContent'>
    <nav id="table">table</nav>
    <section id="pageSection">
      <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.</p>

      <p>He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.</p>

      <p>His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought. It wasn't a dream.</p>

      <p>His room, a proper human room although a little too small, lay peacefully between its four familiar walls.</p>

      <p>A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted
        out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather. Drops</p>
    </section>
  </main>
  <footer id="pageBot">Bottom</footer>
</body>

＆＃13;

Answer 2

添加带有弹性行的div，因为它（使用width属性调整cols宽度）：

html {
  height: 100%;
}
body {
  display: flex;
  height: 100%;
  justify-content: flex-start;
  align-content: flex-start;
  flex-direction: column;
  flex-wrap: wrap;
  margin: 0;
}
#pageTop {
  background-color: lightgrey;
  padding-left: 1em;
  padding-top: .5em;
}
#mainContainer {
  display: flex;
  flex-direction: row;
}

#table {
  background-color: blue;
  width: 50%;

}
#pageSection {
  background-color: lightpink;
  width: 50%;

}
#pagebot {
  background-color: grey;
}

<body>
  <div id="pageTop">Top</div>
  <div id="mainContainer">
    <nav id="table">table</nav>
    <div id="pageSection">section</div>
  </div>
  <div id="pagebot">Bottom</div>
</body>

PS：我还修复了一个pagebot / pageBot变种。请注意，CSS区分大小写。

在垂直柔性容器中水平对齐柔性项目

2 个答案:

更改

`main#pageContent`

`section#pageSection`

段