CSS 100％高度布局，带有可滚动的表格主体

时间：2018-11-19 10:14:56

标签： html css

我有一个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>

2 个答案:

答案 0 :(得分：1)

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

页面的主要部分

我正在使用flexbox放置页面的header，main和footer部分，以使main可以占据尽可能多的垂直空间： 

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

main {
  flex: 1;
}

表格

我将table设置为占据main部分中高度和宽度的100％，并将每个tr元素设置为显示flex，以允许其所有直接子元素都占据相等的空间：

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元素的高度，请在下面的注释中找到文档：

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>

答案 1 :(得分：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>

相关问题
最新问题