我一辈子都搞不懂怎么让这页发挥作用。
我试着让“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>

最佳答案

添加一个带有flex行的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是区分大小写的。

10-06 03:38