使用JsRender时页面底部footer留白无法利用，如何让表格占满全屏高度

调整方案 #

你可以选择以下任意一种方式修改，即可实现表格占满页面全部可视高度：

方式一：修复标签错误+重置默认样式 #

你现有代码存在两个问题：一是末尾<tr>标签未闭合，二是浏览器默认给表格添加的间距没清除，修改如下：

1. 调整CSS代码，新增表格默认样式重置规则：

html,
body {
  height: 100%;
  margin: 0;
  font-size: 20px;
  background-color: yellow;
}
/* 新增表格样式 */
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

2. 修正HTML代码，补全闭合标签、添加表格间距清除属性：

<body>
  <table style="height: 100%;margin: 0;background-color: red;" cellpadding="0" cellspacing="0">
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    </tr>
  </table>
</body>

方式二：使用视口高度单位（更简便） #

直接把表格高度设置为100vh，该单位直接匹配当前窗口的可视高度，不需要依赖html、body的高度设置：
仅需要修改table的行内样式即可：

<table style="height: 100vh;margin: 0;background-color: red;border-collapse: collapse;" cellpadding="0" cellspacing="0">

修改完成后页面底部不会再出现留白，表格会完全占满可用高度。

内容的提问来源于stack exchange，提问作者YeisonM