迫使桌子内的桌子充满剩余的屏幕高度

时间：2019-07-08 14:10:29

标签： html css html-table

我在桌子里面有一张桌子。我希望内部表格将剩余空间填充到屏幕底部。如果表格中的行太多，无法全部容纳在屏幕上，则我希望表格具有垂直滚动条。整个页面不应具有垂直滚动条。

我能够向元素添加id或类，但是一般HTML尽可能保持相同。

https://jsfiddle.net/4rv9htau/2/

前一段时间，我使用了100％的高度和一个固定的像素值来说明其他元素的额外高度，但是我想避免这种情况，这样我就不必担心在其他元素的大小发生变化时就进行更改将来。

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

.MainCell {
  display: block;
}

table div:last-child {
  max-height: 250px;
  overflow-x: hidden;
  overflow-y: auto;
}

html,
body {
  background-color: red;
}

table {
  background-color: blue;
}

table td div:first-child {
  background-color: green;
}

table td div:last-child,
table table {
  background-color: yellow;
}
<table>
  <tbody>
    <tr>
      <td class="MainCell">
        <div>
          <input type="submit" name="btnBack" value="Back" id="btnBack">
          <input type="submit" name="btnDelete" value="Delete" id="btnDelete">
          <input type="submit" name="btnCut" value="Cut" id="btnCut">
        </div>
        <div>
          <table style="border-collapse:collapse;">
            <thead>
              <tr>
                <th>COL #1</th>
                <th>COL #2</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Some val #1</td>
                <td>Some val #1</td>
              </tr>
              <tr>
                <td>Some val #2</td>
                <td>Some val #2</td>
              </tr>
              <tr>
                <td>Some val #3</td>
                <td>Some val #3</td>
              </tr>
              <tr>
                <td>Some val #4</td>
                <td>Some val #4</td>
              </tr>
              <tr>
                <td>Some val #5</td>
                <td>Some val #5</td>
              </tr>
              <tr>
                <td>Some val #6</td>
                <td>Some val #6</td>
              </tr>
              <tr>
                <td>Some val #7</td>
                <td>Some val #7</td>
              </tr>
              <tr>
                <td>Some val #8</td>
                <td>Some val #8</td>
              </tr>
              <tr>
                <td>Some val #9</td>
                <td>Some val #9</td>
              </tr>
              <tr>
                <td>Some val #10</td>
                <td>Some val #10</td>
              </tr>
              <tr>
                <td>Some val #1</td>
                <td>Some val #1</td>
              </tr>
              <tr>
                <td>Some val #2</td>
                <td>Some val #2</td>
              </tr>
              <tr>
                <td>Some val #3</td>
                <td>Some val #3</td>
              </tr>
              <tr>
                <td>Some val #4</td>
                <td>Some val #4</td>
              </tr>
              <tr>
                <td>Some val #5</td>
                <td>Some val #5</td>
              </tr>
              <tr>
                <td>Some val #6</td>
                <td>Some val #6</td>
              </tr>
              <tr>
                <td>Some val #7</td>
                <td>Some val #7</td>
              </tr>
              <tr>
                <td>Some val #8</td>
                <td>Some val #8</td>
              </tr>
              <tr>
                <td>Some val #9</td>
                <td>Some val #9</td>
              </tr>
              <tr>
                <td>Some val #10</td>
                <td>Some val #10</td>
              </tr>
              <tr>
                <td>Some val #1</td>
                <td>Some val #1</td>
              </tr>
              <tr>
                <td>Some val #2</td>
                <td>Some val #2</td>
              </tr>
              <tr>
                <td>Some val #3</td>
                <td>Some val #3</td>
              </tr>
              <tr>
                <td>Some val #4</td>
                <td>Some val #4</td>
              </tr>
              <tr>
                <td>Some val #5</td>
                <td>Some val #5</td>
              </tr>
              <tr>
                <td>Some val #6</td>
                <td>Some val #6</td>
              </tr>
              <tr>
                <td>Some val #7</td>
                <td>Some val #7</td>
              </tr>
              <tr>
                <td>Some val #8</td>
                <td>Some val #8</td>
              </tr>
              <tr>
                <td>Some val #9</td>
                <td>Some val #9</td>
              </tr>
              <tr>
                <td>Some val #10</td>
                <td>Some val #10</td>
              </tr>
              <tr>
                <td>Some val #1</td>
                <td>Some val #1</td>
              </tr>
              <tr>
                <td>Some val #2</td>
                <td>Some val #2</td>
              </tr>
              <tr>
                <td>Some val #3</td>
                <td>Some val #3</td>
              </tr>
              <tr>
                <td>Some val #4</td>
                <td>Some val #4</td>
              </tr>
              <tr>
                <td>Some val #5</td>
                <td>Some val #5</td>
              </tr>
              <tr>
                <td>Some val #6</td>
                <td>Some val #6</td>
              </tr>
              <tr>
                <td>Some val #7</td>
                <td>Some val #7</td>
              </tr>
              <tr>
                <td>Some val #8</td>
                <td>Some val #8</td>
              </tr>
              <tr>
                <td>Some val #9</td>
                <td>Some val #9</td>
              </tr>
              <tr>
                <td>Some val #10</td>
                <td>Some val #10</td>
              </tr>
            </tbody>
          </table>
        </div>
      </td>
    </tr>
  </tbody>
</table>

1 个答案:

答案 0 :(得分：1)

使用vh。 

<td>
  <div>...</div><!-- First div -->
  <div>...</div><!-- Second div -->
</td>
  1. 为第一格设置固定高度。
  2. 第二个格的高度：calc(100vh - fixed height)。

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

html,
body {
  background-color: red;
}

table {
  border-collapse: collapse;
}

.MainCell {
  display: block;
  padding: 0;
}

.MainCell>div:first-child {
  /* Center the inputs inside the div horizontally and vertically with */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  margin: 0;
  padding: 0;
}

.MainCell>div:nth-child(2) {
  max-height: calc(100vh - 30px);
}

table div:last-child {
  max-height: 250px;
  overflow-x: hidden;
  overflow-y: auto;
}

table {
  //background-color: blue;
}

table td div:first-child {
  background-color: green;
}

table td div:last-child,
table table {
  background-color: yellow;
}
<table>
  <tbody>
    <tr>
      <td class="MainCell">
        <div>
          <input type="submit" name="btnBack" value="Back" id="btnBack">
          <input type="submit" name="btnDelete" value="Delete" id="btnDelete">
          <input type="submit" name="btnCut" value="Cut" id="btnCut">
        </div>
        <div>
          <table style="border-collapse:collapse;">
            <thead>
              <tr>
                <th>COL #1</th>
                <th>COL #2</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Some val #1</td>
                <td>Some val #1</td>
              </tr>
              <tr>
                <td>Some val #2</td>
                <td>Some val #2</td>
              </tr>
              <tr>
                <td>Some val #3</td>
                <td>Some val #3</td>
              </tr>
              <tr>
                <td>Some val #4</td>
                <td>Some val #4</td>
              </tr>
              <tr>
                <td>Some val #5</td>
                <td>Some val #5</td>
              </tr>
              <tr>
                <td>Some val #6</td>
                <td>Some val #6</td>
              </tr>
              <tr>
                <td>Some val #7</td>
                <td>Some val #7</td>
              </tr>
              <tr>
                <td>Some val #8</td>
                <td>Some val #8</td>
              </tr>
              <tr>
                <td>Some val #9</td>
                <td>Some val #9</td>
              </tr>
              <tr>
                <td>Some val #10</td>
                <td>Some val #10</td>
              </tr>
              <tr>
                <td>Some val #1</td>
                <td>Some val #1</td>
              </tr>
              <tr>
                <td>Some val #2</td>
                <td>Some val #2</td>
              </tr>
              <tr>
                <td>Some val #3</td>
                <td>Some val #3</td>
              </tr>
              <tr>
                <td>Some val #4</td>
                <td>Some val #4</td>
              </tr>
              <tr>
                <td>Some val #5</td>
                <td>Some val #5</td>
              </tr>
              <tr>
                <td>Some val #6</td>
                <td>Some val #6</td>
              </tr>
              <tr>
                <td>Some val #7</td>
                <td>Some val #7</td>
              </tr>
              <tr>
                <td>Some val #8</td>
                <td>Some val #8</td>
              </tr>
              <tr>
                <td>Some val #9</td>
                <td>Some val #9</td>
              </tr>
              <tr>
                <td>Some val #10</td>
                <td>Some val #10</td>
              </tr>
              <tr>
                <td>Some val #1</td>
                <td>Some val #1</td>
              </tr>
              <tr>
                <td>Some val #2</td>
                <td>Some val #2</td>
              </tr>
              <tr>
                <td>Some val #3</td>
                <td>Some val #3</td>
              </tr>
              <tr>
                <td>Some val #4</td>
                <td>Some val #4</td>
              </tr>
              <tr>
                <td>Some val #5</td>
                <td>Some val #5</td>
              </tr>
              <tr>
                <td>Some val #6</td>
                <td>Some val #6</td>
              </tr>
              <tr>
                <td>Some val #7</td>
                <td>Some val #7</td>
              </tr>
              <tr>
                <td>Some val #8</td>
                <td>Some val #8</td>
              </tr>
              <tr>
                <td>Some val #9</td>
                <td>Some val #9</td>
              </tr>
              <tr>
                <td>Some val #10</td>
                <td>Some val #10</td>
              </tr>
              <tr>
                <td>Some val #1</td>
                <td>Some val #1</td>
              </tr>
              <tr>
                <td>Some val #2</td>
                <td>Some val #2</td>
              </tr>
              <tr>
                <td>Some val #3</td>
                <td>Some val #3</td>
              </tr>
              <tr>
                <td>Some val #4</td>
                <td>Some val #4</td>
              </tr>
              <tr>
                <td>Some val #5</td>
                <td>Some val #5</td>
              </tr>
              <tr>
                <td>Some val #6</td>
                <td>Some val #6</td>
              </tr>
              <tr>
                <td>Some val #7</td>
                <td>Some val #7</td>
              </tr>
              <tr>
                <td>Some val #8</td>
                <td>Some val #8</td>
              </tr>
              <tr>
                <td>Some val #9</td>
                <td>Some val #9</td>
              </tr>
              <tr>
                <td>Some val #10</td>
                <td>Some val #10</td>
              </tr>
            </tbody>
          </table>
        </div>
      </td>
    </tr>
  </tbody>
</table>

修改

设置.MainCell { padding: 0 }和table { border-collapse: collapse}可以防止整个页面上出现垂直滚动条。

相关问题
最新问题