Problems with Footer

Question

I’m having problems with my footer on a page that contains a list, which I add to and it grows. The problem is that you are creating two scrollbars on the site and I am not able to solve. Follow the list and css.

.footer {
 background-color: #F2F2F2;
    width:100%;
    height: 60px;
    position:fixed;    
    bottom:0;

}

 <table id="lista-compras" class="table table-striped">
    <thead>
      <tr>
        <th>Assunto</th>
        <th>Descrição</th>
        <th>Likes</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="topico in topicos | filter:search" class="comprado-{{ topico.comprado }}">
        <td><strong>{{ topico.assunto }}</strong></td>
        <td><strong>{{ topico.descricao }}</strong></td>
        <td><strong>{{ topico.grau }}</strong></td>
        <td><strong>
          <a href="

Example:

Answer 1

You can solve this issue of the second scroll bar easily. In your file style.css that is on this link:

https://forum-alldispor.c9users.io/views/css/style.css

In line 18 starting with html, body {

remove from this class line 21, remove this:

height:100%;

That is, you replace this (starts on line 18):

html, body {
 width: 100%;
 overflow-x: hidden;
 height:100%;
 min-height: 100%;
 position: relative;
}

For this reason:

html, body {
 width: 100%;
 overflow-x: hidden;
 min-height: 100%;
 position: relative;
}