JsRender "footer" space

Question

I'm working with jsrender and i need to use all the space in the page but there is some space in the "footer" that can't be use, i need that the table use the full height

html,
body {
  height: 100%;
  margin: 0;
  font-size: 20px;
  background-color: yellow;
}

<body>
  <table style=" height: 100%;margin: 0;background-color: red;">
    <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>

Are you asking how to make your table full width? Please revise to be more clear. Edit the snippet to show the problem. We can't debug images. — isherwood
I took the image out, for the reason I mentioned. Make the snippet show the problem, please, so we know what we're debugging. — isherwood
in the snippet the table takes the 100% and it's ok, but when i use jsrender it takes almost the 85% heigh of the page, it's like there is some "footer" that can be use,but is only with the js render, that's what i need to know how to solve — YeisonM

Fabian S. Fabian S. · Accepted Answer · 2021-10-15T13:12:24

As youre stating in the comments you want the table to take 100% of the available width, just add width:100%; to your table. Also you should move your table styles from inline-styles to the css.

I added the neccessary styles in the following snippet:

html,
body {
  height: 100%;
  margin: 0;
  font-size: 20px;
  background-color: yellow;
}

table {
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: red;
}

<body>
  <table>
    <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>

JsRender "footer" space

1 Answers