Full Calendar is passing the footer of the site

Question

Enter the code here As shown in the image below, fullcalendar by clicking "more" passes my footer when in fact it should push it down increasing the page height, as with all other screens. Which css element could I use to fix this problem? I’ve tried using clearfix, tinkering with z-index, but it didn’t work... I may have made incorrect use of it. I use the INSPINIA template sold in Wrapbootstrap and it is very high quality.

Code:

<div class="col-lg-12 col-md-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5><i class="fa fa-calendar"></i> Agenda</h5>
            </div>
            <div class="ibox-content">
                <div class="row">
                    <div class="col-lg-12 col-md-12">
                        <div id="calendar" class="animated"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
   <div class="footer text-center">
        <div>
            <strong>SoftTooth™ 0.3.0-Beta</strong> - 2014-2015 Todos os direitos reservados. By <a>Allan Carvalho</a> e <a>Eduardo Luciano</a>
       </div>
    </div>

CSS:

    .footer {
  background: none repeat scroll 0 0 white;
  border-top: 1px solid #e7eaec;
  bottom: 0;
  left: 0;
  padding: 10px 20px;
  position: absolute;
  right: 0;
}

Anyone can help?

Imagery:

Answer 1

It would be necessary to even see an online example of this in operation to see and indicate a concrete solution, or what is generating this problem, however I have two solutions to help you with this:

1. First solution - Add a scrollbar.
   In the box where it says "of 31 August 2015", inside it is a blank space and then the numbers (which I think are hours) with a background green.
   Click on the white part with the right mouse button and inspects the element to find out what the class is "container/wrapper" (or class pai if you prefer) that contains the other numbers with the green background, and adds to this container the following CSS styles: max-height: 100px; overflow-x: auto;. The goal is to prevent it from extending beyond the footer by adding a scrollbar when this div is greater than 100px (or the size you want).
   Here is an example below:

.horas {
    max-height: 100px;          /* Altura máxima da div */
    overflow-x: auto;           /* Adiciona Scrollbar quanto necessário */
    width: 60px;                /* Não Relevante */
    border: 2px solid #C6C6C6;  /* Não Relevante */
}

<div class="horas">
    001<br/>
    002<br/>
    003<br/>
    004<br/>
    005<br/>
    006<br/>
    007<br/>
    008<br/>
    009<br/>
    010<br/>
    011<br/>
    012<br/>
    013<br/>
    014<br/>
    015<br/>
    016<br/>
    017<br/>
    018<br/>
    019<br/>
    020<br/>
</div>

2. Second solution - Utilise z-index.
   As already mentioned in the above comments by @balexandre, use z-index will cause that list to be above footer and not the other way around. To find out which class to apply the z-index, follows the same process of inspecting the item mentioned in First solution, but this time even inspects the title "of 31 August 2015" to find out what the div class/id above this title, which will be his class pai that "boxes" the title, the hours etc, and that will be the class where we will apply the z-index. Example below:

.wrapperHoras {
    z-index: 1;                 /* Faz com que as horas fiquem por cima do Footer - Aumenta este valor se for necessário */
    position: absolute;         /* pre-defenido */
    background: #fff;
    width: 60px;                /* Não Relevante */
    border: 2px solid #C6C6C6;  /* Não Relevante */
}

.footer {
    text-align: center;
    background-color: #85CFF9;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 20px;
    position: absolute;
}

<div class="wrapperHoras">
    <div class="horas">
        001<br/>
        002<br/>
        003<br/>
        004<br/>
        005<br/>
        006<br/>
        007<br/>
        008<br/>
        009<br/>
        010<br/>
        011<br/>
        012<br/>
        013<br/>
        014<br/>
        015<br/>
        016<br/>
        017<br/>
        018<br/>
        019<br/>
        020<br/>
    </div>
</div>
<div class="footer">Meu Footer</div>

Answer 2

Try the following, change the position:absolute from the footer to relative, and if the div also has this value change it, then use a clearfix in div that involves all the content, I believe it will solve.