强制表格内的表格填充剩余屏幕高度

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

我可以向元素添加 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>

随着vh的使用。

<td>
  <div>...</div><!-- First div -->
  <div>...</div><!-- Second div -->
</td>

为第一个div 设置固定高度。
第二个div的高度：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}以防止整个页面上出现垂直滚动条。

相关内容

最新更新

热门标签：