Dropdown menu changing footer positioning

Question

When opening the list of options, the footer is affected and has its position changed.

Code on the fiddle

Answer 1

One solution would be to put the dropdown open up, for this just put the class dropup in div that involves the dropdown:

<div class="input-group-btn dropup">
    <button type="button" class="btn btn-primary dropdown-toggle" id="btn-dropdown-uf" data-toggle="dropdown">
        Selecione <span class="caret"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-right dropdown-high" aria-labelledby="btn-dropdown-uf" role="menu">
        <li><a href="#">AC</a></li>
        <li><a href="#">AL</a></li>
        <li><a href="#">AP</a></li>
        <li><a href="#">AM</a></li>
        <li><a href="#">BA</a></li>
        <li><a href="#">CE</a></li>
        <li><a href="#">DF</a></li>
        <li><a href="#">ES</a></li>
        <li><a href="#">GO</a></li>
        <li><a href="#">MA</a></li>
        <li><a href="#">MT</a></li>
        <li><a href="#">MS</a></li>
        <li><a href="#">MG</a></li>
        <li><a href="#">PA</a></li>
        <li><a href="#">PB</a></li>
        <li><a href="#">PR</a></li>
        <li><a href="#">PE</a></li>
        <li><a href="#">PI</a></li>
        <li><a href="#">RJ</a></li>
        <li><a href="#">RN</a></li>
        <li><a href="#">RS</a></li>
        <li><a href="#">RO</a></li>
        <li><a href="#">RR</a></li>
        <li><a href="#">SC</a></li>
        <li><a href="#">SP</a></li>
        <li><a href="#">SE</a></li>
        <li><a href="#">TO</a></li>
    </ul>
</div>