html - 网格布局内的可滚动 tbody

Question

我有一个简单的 3 部分布局(页眉/侧边栏/内容)，使用 CSS 网格。在我的内容中，我有一个表格。

我希望表格填充 div.content 中的剩余空间并且有一个tbody有自己的滚动条。

overflow-y: scroll; 的每个组合和 position: relative与各种宽度/高度导致 div.content获取滚动条，或 <table>溢出(参见示例 - 也在 jsbin 上)。

如何制作此表 <tbody>接收滚动条，并让表格本身受内容 div 限制而不会溢出？

html, body {
  margin: 0;
  height: 100%;
}

main {
  display: grid;
  grid-template-areas: 'header header' 'sidebar content';
  grid-template-rows: 100px 1fr;
  grid-template-columns: 200px 1fr;
  width: 100%;
  height: 100%;
}


header {
  background-color: #CCC;
  grid-area: header;
  padding: 20px;
}
aside {
  background-color: #EEE;
  grid-area: sidebar;
  padding: 10px;
}
aside img {
  width: 100%;
  mix-blend-mode: darken;
}
div.content {
  position: relative;
  display: flex;
  flex-direction: column;
  grid-area: content;
  min-height: 0;
  min-width: 0;
  padding: 10px;
  max-height: 100%;
  border-bottom: 2px solid black;
  overflow-y: scroll;
}

table {
  margin: 10px;
  width: 100%;
}
thead {
  text-align: left;
}
tbody {
  height: 100%;
  overflow-y: scroll;
}

.code {
  font: 12px Courier;
  color: blue;
}

<main>
      <header>
        <h2>Really rad app title</h2>
      </header>
      <aside>
        <img src="https://thumb7.shutterstock.com/display_pic_with_logo/436114/423846025/stock-vector-example-stamp-423846025.jpg" />
        <span>Some Contextual Informations and other such sidebar-y things<span>
      </aside>
      <div class="content">
        <h3>Some Stuffs</h3>
        <div>
          Why does this <span class="code">&lt;tbody&gt;</span> ignore my <span class="code">overflow-y: scroll;</span>?
          <br /><br />
          I want <span class="code">div.content</span> to act as a portal/window, with everything around it remaining fixed; but I want the table to stop before the bottom of this window and have a scrollable body (instead of scrolling this text offscreen).
        </div>
      
        <table>
          <thead><tr><th>One</th><th>Two</th><th>Three</th></tr></thead>
          <tbody>
<tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
          <tr><td>Too much content</td><td>Too much content</td><td>Too much content</td></tr>
          <tr><td>Too much content</td><td>Too much content</td><td>Too much content</td></tr>
          <tr><td>Too much content</td><td>Too much content</td><td>Too much content</td></tr>
          <tr><td>Too much content</td><td>Too much content</td><td>Too much content</td></tr>
          <tr><td>Too much content</td><td>Too much content</td><td>Too much content</td></tr>
          <tr><td>Too much content</td><td>Too much content</td><td>Too much content</td></tr>
          <tr><td>Too much content</td><td>Too much content</td><td>Too much content</td></tr>
          <tr><td>Too much content</td><td>Too much content</td><td>Too much content</td></tr>
          </tbody>
        </table>
      </div>
    </main>

Answer 1

似乎表格没有高度的概念，所以我们使用一个包装 div 并向其添加一个 flex-grow(您已经在使用 flexbox)。

主要变化:

用 <div class='fill'></div> 包装的表格

css 添加 div.content .fill { flex: 1; overflow-y: scroll }

相关:CSS3 display:table, overflow-y:scroll doesn't work

html, body {
  margin: 0;
  height: 100%;
}

main {
  display: grid;
  grid-template-areas: 'header header' 'sidebar content';
  grid-template-rows: 100px 1fr;
  grid-template-columns: 200px 1fr;
  width: 100%;
  height: 100%;
}


header {
  background-color: #CCC;
  grid-area: header;
  padding: 20px;
}
aside {
  background-color: #EEE;
  grid-area: sidebar;
  padding: 10px;
}
aside img {
  width: 100%;
  mix-blend-mode: darken;
}
div.content {
  position: relative;
  display: flex;
  flex-direction: column;
  grid-area: content;
  min-height: 0;
  min-width: 0;
  padding: 10px;
  max-height: 100%;
  border-bottom: 2px solid black;
  overflow-y: scroll;
}

div.content .fill {
  flex: 1;
  overflow-y: scroll;
}

table {
  width: 100%;
  height: 100px;
  overflow: auto;
}
thead {
  text-align: left;
}
tbody {
  height: 100%;
  overflow-y: scroll;
}

.code {
  font: 12px Courier;
  color: blue;
}

<main>
      <header>
        <h2>Really rad app title</h2>
      </header>
      <aside>
        <img src="https://thumb7.shutterstock.com/display_pic_with_logo/436114/423846025/stock-vector-example-stamp-423846025.jpg" />
        <span>Some Contextual Informations and other such sidebar-y things<span>
      </aside>
      <div class="content">
        <h3>Some Stuffs</h3>
        <div>
          Why does this <span class="code">&lt;tbody&gt;</span> ignore my <span class="code">overflow-y: scroll;</span>?
          <br /><br />
          I want <span class="code">div.content</span> to act as a portal/window, with everything around it remaining fixed; but I want the table to stop before the bottom of this window and have a scrollable body (instead of scrolling this text offscreen).
        </div>
        <div class='fill'>
            <table>
              <thead><tr><th>One</th><th>Two</th><th>Three</th></tr></thead>
              <tbody>
    <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Some content</td><td>Some Content</td><td>Some Content</td></tr>
              <tr><td>Too much content</td><td>Too much content</td><td>Too much content</td></tr>
              <tr><td>Too much content</td><td>Too much content</td><td>Too much content</td></tr>
              <tr><td>Too much content</td><td>Too much content</td><td>Too much content</td></tr>
              <tr><td>Too much content</td><td>Too much content</td><td>Too much content</td></tr>
              <tr><td>Too much content</td><td>Too much content</td><td>Too much content</td></tr>
              <tr><td>Too much content</td><td>Too much content</td><td>Too much content</td></tr>
              <tr><td>Too much content</td><td>Too much content</td><td>Too much content</td></tr>
              <tr><td>Too much content</td><td>Too much content</td><td>Too much content</td></tr>
              </tbody>
            </table>
        </div>
      </div>
    </main>