时间戳

首页 > 解决方案 > 允许表格滚动但保持文本框元素在底部可见

html - 允许表格滚动但保持文本框元素在底部可见

问题描述

我有一个带有固定标题、滚动正文和表格下方的文本框的 HTML 表格。我希望可见表格区域自动调整大小以填充浏览器窗口，并且底部仍可见文本框。将 div 高度设置为 200px 时，它可以正常工作，但如果我将其设置为 100% 以填充页面，则整个页面会滚动。如何让表格拉伸/收缩以适应页面并保持文本框在底部可见？谢谢！

HTML：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<div class="tableFixHead">
<table>
    <thead>
    <tr>
        <th>Test1</th>
        <th>Test2</th>
        <th>Test3</th>
        <th>Test4</th>
        <th>Test5</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>data1</td>
      <td>data2</td>
      <td>data3</td>
      <td>data4</td>
      <td>data5</td>
    </tr>
    <tr>
      <td>data1</td>
      <td>data2</td>
      <td>data3</td>
      <td>data4</td>
      <td>data5</td>
    </tr>
    <tr>
      <td>data1</td>
      <td>data2</td>
      <td>data3</td>
      <td>data4</td>
      <td>data5</td>
    </tr>
    <tr>
      <td>data1</td>
      <td>data2</td>
      <td>data3</td>
      <td>data4</td>
      <td>data5</td>
    </tr>
    <tr>
      <td>data1</td>
      <td>data2</td>
      <td>data3</td>
      <td>data4</td>
      <td>data5</td>
    </tr>
    <tr>
      <td>data1</td>
      <td>data2</td>
      <td>data3</td>
      <td>data4</td>
      <td>data5</td>
    </tr>
    <tr>
      <td>data1</td>
      <td>data2</td>
      <td>data3</td>
      <td>data4</td>
      <td>data5</td>
    </tr>
    <tr>
      <td>data1</td>
      <td>data2</td>
      <td>data3</td>
      <td>data4</td>
      <td>data5</td>
    </tr>
    <tr>
      <td>data1</td>
      <td>data2</td>
      <td>data3</td>
      <td>data4</td>
      <td>data5</td>
    </tr>
    <tr>
      <td>data1</td>
      <td>data2</td>
      <td>data3</td>
      <td>data4</td>
      <td>data5</td>
    </tr>
    <tr>
      <td>data1</td>
      <td>data2</td>
      <td>data3</td>
      <td>data4</td>
      <td>data5</td>
    </tr>
    </tbody> 
</table>
</div>
<div class="mainScreen">
<form method="POST">
    <input name="text" id ="input">
    <input type="submit">
</form>
</div>
</html>

CSS：

      .mainScreen {
          height: 30px;
          bottom: 0;
      }
      .tableFixHead {
        overflow-y: auto;
        height: 200px;
      }
      .tableFixHead table{
        height: 100%;
      }
      .tableFixHead thead th {
        position: sticky;
        top: 0;
      }
      table {
        border-collapse: collapse;
        width: 100%;
        height: 100%;
      }
      th, td {
        padding: 4px 16px;
        border: 1px solid #ccc;
      }
      th {
        background: #eee;
      }

标签： htmlcss

解决方案

删除overflow-y: auto;并.tableFixHead添加position: sticky;到.mainScreen：

.mainScreen {
  height: 30px;
  bottom: 0;
  position: sticky;
  background-color: white;
}

.tableFixHead {
  height: 100%;
}

.tableFixHead table {
  height: 100%;
}

.tableFixHead thead th {
  position: sticky;
  top: 0;
}

table {
  border-collapse: collapse;
  width: 100%;
  height: 100%;
}

th,
td {
  padding: 4px 16px;
  border: 1px solid #ccc;
}

th {
  background: #eee;
}
<div class="tableFixHead">
  <table>
    <thead>
      <tr>
        <th>Test1</th>
        <th>Test2</th>
        <th>Test3</th>
        <th>Test4</th>
        <th>Test5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>data1</td>
        <td>data2</td>
        <td>data3</td>
        <td>data4</td>
        <td>data5</td>
      </tr>
      <tr>
        <td>data1</td>
        <td>data2</td>
        <td>data3</td>
        <td>data4</td>
        <td>data5</td>
      </tr>
      <tr>
        <td>data1</td>
        <td>data2</td>
        <td>data3</td>
        <td>data4</td>
        <td>data5</td>
      </tr>
      <tr>
        <td>data1</td>
        <td>data2</td>
        <td>data3</td>
        <td>data4</td>
        <td>data5</td>
      </tr>
      <tr>
        <td>data1</td>
        <td>data2</td>
        <td>data3</td>
        <td>data4</td>
        <td>data5</td>
      </tr>
      <tr>
        <td>data1</td>
        <td>data2</td>
        <td>data3</td>
        <td>data4</td>
        <td>data5</td>
      </tr>
      <tr>
        <td>data1</td>
        <td>data2</td>
        <td>data3</td>
        <td>data4</td>
        <td>data5</td>
      </tr>
      <tr>
        <td>data1</td>
        <td>data2</td>
        <td>data3</td>
        <td>data4</td>
        <td>data5</td>
      </tr>
      <tr>
        <td>data1</td>
        <td>data2</td>
        <td>data3</td>
        <td>data4</td>
        <td>data5</td>
      </tr>
      <tr>
        <td>data1</td>
        <td>data2</td>
        <td>data3</td>
        <td>data4</td>
        <td>data5</td>
      </tr>
      <tr>
        <td>data1</td>
        <td>data2</td>
        <td>data3</td>
        <td>data4</td>
        <td>data5</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="mainScreen">
  <form method="POST">
    <input name="text" id="input">
    <input type="submit">
  </form>
</div>

推荐阅读