HTML 表格全高和全宽，无滚动

Posted 2023-03-05

【中文标题】HTML 表格全高和全宽，无滚动

【英文标题】：HTML table full height and width with no scrolling

【发布时间】：2016-11-22 17:47:47

【问题描述】：

我想要一个固定高度的标题，全高/全宽的表格，然后是下面的一些 div，最好使用 flexbox。

如何在没有滚动条的情况下做到这一点，以便所有内容都占据整个页面？

这是我的尝试：https://jsfiddle.net/1nyv4pqk/2/

html, body 
  height: 100%;
  width: 100%;
  margin: 0px;

.outter 
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: red;

.header 
  background-color: gray;
  height: 3em;

.content 
  height: 100%;
  background-color: green;

.footerClass 
  background: yellow;
  height: 3em;

.tableClass 
  margin: 10px;
  height: 100%;
  width: 100%;
  border: 2px solid;
  border-collapse: collapse;
  border-spacing: 0;

.tableClass th,
.tableClass td 
  border: 1px solid black;

<div class="outter">
  <div class="header">This is a header</div>
  <div class="content">
    <table class="tableClass">
      <thead>
        <tr>
          <th>COL 1</th>
          <th>COL 2</th>
          <th>COL 3</th>
          <th>COL 4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>This is some text in row 1</td>
          <td>1</td>
          <td>3</td>
        </tr>
        <tr>
          <td>2</td>
          <td>This is some text in row 2</td>
          <td>1</td>
          <td>3</td>
        </tr>
        <tr>
          <td>3</td>
          <td>This is some text in row 3</td>
          <td>3,4,5</td>
          <td>1</td>
        </tr>
        <tr>
          <td>4</td>
          <td>This is some text in row 4</td>
          <td>2,6,7</td>
          <td>2</td>
        </tr>
      </tbody>
    </table>
    <div>
      Another Div
    </div>
    <div class="footerClass">
      This is a footer
    </div>
  </div>
</div>

【问题讨论】：

所有你的 div（除了表格）都有固定的或动态的高度吗？

不，我希望表格和页脚之间的任何 div 都具有固定高度、根据需要占用垂直空间或百分比的能力。

【参考方案1】：

您的容器上有height: 100%。

但是在您的 .outter 容器中，您有这些孩子：

.header 
  background-color: gray;
  height: 3em;


.content 
  height: 100%;
  background-color: green;

效果如下：

3em + 100% = vertical overflow = vertical scrollbar

补偿header 高度。进行此调整：

.content 
  height: calc(100% - 3em);
  background-color: green;

必须对.content 的子级应用类似的高度调整：

.tableClass 
  margin: 10px;
  height: calc(100% - 3em - 20px - 19.0909px); /* height, less footer height, less margin
                                                  heights, less "Another Div" height */
  width: 100%;
  border: 2px solid;
  border-collapse: collapse;
  border-spacing: 0;

就宽度而言，你有这个：

.tableClass 
  margin: 10px;
  height: 100%;
  width: 100%;
  border: 2px solid;
  border-collapse: collapse;
  border-spacing: 0;

margin 正在添加到width: 100%，导致水平滚动。

用width: calc(100% - 20px)补偿溢出。

还要添加* box-sizing: border-border; ，因此边框和填充被考虑到width 和height 声明中。

Revised Fiddle

【讨论】：

您如何解释“另一个 Div”何时开始变大？当我添加几段时，我再次得到滚动条jsfiddle.net/1nyv4pqk/4

您可以指定一个高度，以便将其计入容器的计算中。或者使用 flex 属性。

我不想指定高度，那么使用 flex 属性是什么意思？

flex-grow 属性使元素能够占据容器中的剩余空间。这是列的示例，可以很容易地应用于行：***.com/q/23794713/3597276