带有可滚动表格主体的 CSS 100% 高度布局答案

【问题标题】：CSS 100% height layout with a scrollable table body带有可滚动表格主体的 CSS 100% 高度布局
【发布时间】：2018-11-21 15:28:16
【问题描述】：

我有一个 100% 高度的布局，分为三个部分：页眉、内容、页脚。

我想在内容部分中显示一个高度为 100% 的表格，并且我希望表格主体具有用于表格主体内容的垂直滚动条。

我该怎么做？

似乎我无法将 tbody 高度设置为 100% 并有滚动条？

html, body {
     height: 100%;
     padding: 0;
     margin: 0;
}
 #container {
     display: table;
     width: 100%;
     height: 100%;
     border: 1px solid red;
     text-align: center;
}
 #container > div {
     display: table-row;
     width: 100%;
}
 #container > div > div {
     display: table-cell;
     width: 100%;
     border-radius:10px;
}
 #header > div {
     height:50px;
     border:solid 2px #aaa;
}
 #content > div {
     height: 100%;
     background:#f0f4f0;
     border:solid 2px #5a5;
}
 #footer > div {
     height:50px;
     border:solid 2px #a55;
}
 table {
     table-layout:fixed;
     margin:auto;
}
 th, td {
     padding:5px 10px;
     border:1px solid #000;
}
 thead, tfoot {
     background:#f9f9f9;
     display:table;
     width:100%;
     width:calc(100% - 18px);
}
 tbody {
     height:400px;
     overflow:auto;
     overflow-x:hidden;
     display:block;
     width:100%;
}
 tbody tr {
     display:table;
     width:100%;
     table-layout:fixed;
}

<div id="container">
    <div id="header">
        <div>header</div>
    </div>
    <div id="content">
        <div>
            <table>
                <thead>
                    <tr>
                        <th scope="col">Header 1</th>
                        <th scope="col">Header 2</th>
                        <th scope="col">Header 3</th>
                        <th scope="col">Header 4</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Cell2 content</td>
                        <td>Cell content</td>
                        <td>Cell content</td>
                        <td>Cell content</td>
                    </tr>
                    <tr>
                        <td>Cell content</td>
                        <td>Cell content</td>
                        <td>Cell content</td>
                        <td>Cell content</td>
                    </tr>
                    <tr>
                        <td>Cell content</td>
                        <td>Cell content</td>
                        <td>Cell content</td>
                        <td>Cell content</td>
                    </tr>
                    <tr>
                        <td>Cell content</td>
                        <td>Cell content</td>
                        <td>Cell content</td>
                        <td>Cell content</td>
                    </tr>
                    <tr>
                        <td>Cell content</td>
                        <td>Cell content</td>
                        <td>Cell content</td>
                        <td>Cell content</td>
                    </tr>
                    <tr>
                        <td>Cell content</td>
                        <td>Cell content</td>
                        <td>Cell content</td>
                        <td>Cell content</td>
                    </tr>
                    <tr>
                        <td>Cell content</td>
                        <td>Cell content</td>
                        <td>Cell content</td>
                        <td>Cell content</td>
                    </tr>
                    <tr>
                        <td>Cell content</td>
                        <td>Cell content</td>
                        <td>Cell content</td>
                        <td>Cell content</td>
                    </tr>
                    <tr>
                        <td>Cell content</td>
                        <td>Cell content</td>
                        <td>Cell content</td>
                        <td>Cell content</td>
                    </tr>
                    <tr>
                        <td>Cell content</td>
                        <td>Cell content</td>
                        <td>Cell content</td>
                        <td>Cell content</td>
                    </tr>
                    <tr>
                        <td>Cell content</td>
                        <td>Cell content</td>
                        <td>Cell content</td>
                        <td>Cell content</td>
                    </tr>
                    <tr>
                        <td>Cell content</td>
                        <td>Cell content</td>
                        <td>Cell content</td>
                        <td>Cell content</td>
                    </tr>
                    <tr>
                        <td>Cell content</td>
                        <td>Cell content</td>
                        <td>Cell content</td>
                        <td>Cell content</td>
                    </tr>
                    <tr>
                        <td>Cell content</td>
                        <td>Cell content</td>
                        <td>Cell content</td>
                        <td>Cell content</td>
                    </tr>
                    <tr>
                        <td>Cell content</td>
                        <td>Cell content</td>
                        <td>Cell content</td>
                        <td>Cell content</td>
                    </tr>
                    <tr>
                        <td>Cell content</td>
                        <td>Cell content</td>
                        <td>Cell content</td>
                        <td>Cell content</td>
                    </tr>
                    <tr>
                        <td>Cell content</td>
                        <td>Cell content</td>
                        <td>Cell content</td>
                        <td>Cell content</td>
                    </tr>
                    <tr>
                        <td>Cell content</td>
                        <td>Cell content</td>
                        <td>Cell content</td>
                        <td>Cell content</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td>Footer 1</td>
                        <td>Footer 2</td>
                        <td>Footer 3</td>
                        <td>Footer 4</td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
    <div id="footer">
        <div>footer</div>
    </div>
</div>

【问题讨论】：

试试这个codepen.io/daveoncode/pen/LNomBE
I'd like to display a table inside a the content section with 100% height 那么为什么要将400px 应用于它的高度而不是仅仅 100% 呢？
如果我应用 100% 滚动条不起作用
@nullException 您愿意使用弹性盒解决方案吗？

标签： html css

【解决方案1】：

你的布局有点乱。在我看来太多包含 div 了。使用 flex 做了一些改变 - 所以表格容器会有

display: flex;
flex-direction: column;
overflow: auto;

表格将有flex-grow: 1;

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

#container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border: 1px solid red;
  text-align: center;
}

#container>div {
  width: 100%;
  display: flex;
  flex-direction: column;
}

#container>div>div {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: auto;
}

#header {
  flex-basis: 50px;
  flex-grow: 0;
  flex-shrink: 0;
}

#header>div {
  height: 50px;
  border: solid 2px #aaa;
}

#content {
  flex-grow: 1;
}

#content>div {
  height: 100%;
  background: #f0f4f0;
  border: solid 2px #5a5;
  display: flex;
  flex-direction: column;
}

#footer{
  flex-basis: 50px;
  flex-grow: 0;
  flex-shrink: 0;
}

#footer>div {
  height: 50px;
  border: solid 2px #a55;
}

table {
  flex-grow: 1;
  table-layout: fixed;
  margin: auto;
}

th,
td {
  padding: 5px 10px;
  border: 1px solid #000;
}

thead,
tfoot {
  background: #f9f9f9;
  display: table;
  width: 100%;
  width: calc(100% - 18px);
}

tbody {
  overflow: auto;
  overflow-x: hidden;
  display: block;
  width: 100%;
}

tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

<div id="container">
  <div id="header">
    <div>header</div>
  </div>
  <div id="content">
    <div>
      <table>
        <thead>
          <tr>
            <th scope="col">Header 1</th>
            <th scope="col">Header 2</th>
            <th scope="col">Header 3</th>
            <th scope="col">Header 4</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Cell2 content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
          </tr>
          <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
          </tr>
          <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
          </tr>
          <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
          </tr>
          <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
          </tr>
          <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
          </tr>
          <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
          </tr>
          <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
          </tr>
          <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
          </tr>
          <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
          </tr>
          <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
          </tr>
          <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
          </tr>
          <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
          </tr>
          <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
          </tr>
          <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
          </tr>
          <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
          </tr>
          <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
          </tr>
          <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td>Footer 1</td>
            <td>Footer 2</td>
            <td>Footer 3</td>
            <td>Footer 4</td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
  <div id="footer">
    <div>footer</div>
  </div>
</div>

【讨论】：

@nullException 如果它解决了你的问题，请采纳答案，谢谢:)

【解决方案2】：

我不得不为此使用 javascript，但也许有人可以想出一个纯 CSS 解决方案。

页面的主要部分

我正在使用 flexbox 来定位页面的 header、main 和 footer 部分，从而允许 main 占用尽可能多的垂直空间：

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

桌子

我将table 设置为占用main 部分中100% 的高度和宽度，并将每个tr 元素设置为显示弹性，从而允许其所有直接子元素占用相等的空间：

table {
  width: 100%;
  height: 100%;
}

tr {
  display: flex;
}
tr > * {
  flex: 1;
}

我已将 tbody 元素设置为 display: block，这将允许内容在溢出时可滚动：

tbody {
  display: block;
  overflow-y: scroll;
}
tbody tr {
  height: 40vh; // for demonstrating the scrolling of the tbody
}

然后我使用了一些javascript来设置tbody元素的高度，请在下面的cmets中找到文档：

setTbodyHeight();
window.addEventListener("resize", setTbodyHeight);

function setTbodyHeight() {
  // get the viewport height
  let viewportHeight = window.innerHeight;

  // calculate how much of the height the main should consume
  let headerHeight = getHeight("header");
  let footerHeight = getHeight("footer");

  let mainHeight = viewportHeight - (headerHeight + footerHeight);

  // from the main height calcuate how much space would be available if you subtracted the tfoot/thead height
  let theadHeight = getHeight("thead");
  let tfootHeight = getHeight("tfoot");

  let tbodyHeight = mainHeight - (theadHeight + tfootHeight);

  // set the height of the tbody to this value
  let tbody = document.querySelector("tbody");
  tbody.style.height = tbodyHeight + "px";

  function getHeight(elementName) {
    let element = document.querySelector(elementName);
    let elementCSS = window.getComputedStyle(element);

    let height = parseInt(elementCSS.getPropertyValue("height"));

    return height;
  }
}

/* IGNORE RULES FROM HERE.....*/

html,
body {
  height: 100%;
}

body {
  font-family: sans-serif;
  margin: 0;
}

header::after,
footer::after {
  content: "." attr(class);
}

tbody tr:nth-child(even) {
  background: firebrick;
  color: white
}

td {
  text-align: center;
}


/*.....TO HERE*/

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

table {
  width: 100%;
  height: 100%;
}

tr {
  display: flex;
}

tr>* {
  flex: 1;
}

tbody {
  display: block;
  overflow-y: scroll;
}

tbody tr {
  height: 20vh;
}

tbody td {
  line-height: 20vh;
}

<header class="header"></header>
<main class="main">
  <table>
    <thead>
      <tr>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Footer</td>
        <td>Footer</td>
        <td>Footer</td>
      </tr>
    </tfoot>
  </table>
</main>
<footer class="footer"></footer>

【讨论】：