Question

我希望有一个固定高度的标题，表格有完整的高度/宽度，然后是下面的一些div，最好使用flexbox。

如果没有滚动条，我该如何做到这一点，以便所有内容都占据整个页面？

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>

Answer 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

HTML表格的高度和宽度没有滚动

1 个答案: