html - 缩小窗口时 Bootstrap 相对页脚上升

Question

我有一个站点(asp.net 和 bootstrap)问题是我有一个相对定位的页脚，当调整窗口大小时(或从移动设备上看到时)我可以为内容添加边距页面来防止这个问题(但我会有很多空白，这非常可怕)

这是我的页脚:

<div class="footer" id="footer" >   
<div class="piede_circolare" style="display:inline-block; padding:5%; border-radius:50%; background-color:Black;">
<div><h2>FEATURES</h2></div>
<div style="text-align:left;">
<ul>
<li>User Guides</li>
<li>FAQ</li>
<li>Shortcuts</li>
<li>Glossary</li>
<li>Forum</li>
</ul>
</div>

</div>
<div class="piede_circolare" style="display:inline-block; padding:5%; border-radius:50%; background-color:Purple;"">
    <div><h2>SERVICES</h2></div>

<div style="text-align:left;">
<ul >
<li>User Guides</li>
<li>FAQ</li>
<li>Shortcuts</li>
<li>Glossary</li>
<li>Forum</li>
</ul>
</div>

</div>

<div class="piede_circolare" style="display:inline-block; padding:5%; border-radius:50%; background-color:Black;"">
    <div><h2>ABOUT US</h2></div>

<div style="text-align:left;">
<ul >
<li>User Guides</li>
<li>FAQ</li>
<li>Shortcuts</li>
<li>Glossary</li>
<li>Forum</li>
</ul>
</div>

和CSS:

.footer
{
    position:relative;
    color: white;
    background-color:#242424;
    padding: 8px 0px 0px 0px;
    margin: 0px auto;
    text-align: center;
    line-height: normal;
    margin-bottom:0;

bottom:0;
    border-top: 5px solid #242424;

    -webkit-transition: border-color 1s ease;
    -moz-transition: border-color 1s ease;
    -o-transition: border-color 1s ease;
    -ms-transition: border-color 1s ease;
     transition: border-color 1s ease; 


}

.footer:hover
{
    border-color: #77008F;

    }

100% 缩放:

50% 缩放:

25% 缩放(这里是问题所在 --> 请参阅页脚下方的空白区域):

Answer 1

最后我解决了添加一个元素“spacer”和一个 js 函数: 在 HTML 中:

<div class="row" id="spacer" style="height:10px;">


    </div>

js:

function aggiustaPiede() 
        {


            var spacer = document.getElementById("spacer");
            var contenuto = document.getElementById("getAltezza");
            //alert(spacer.clientHeight);
            var diff = document.documentElement.clientHeight - contenuto.offsetHeight;
            var hhh = spacer.clientHeight;
            spacer.style.height = hhh + diff+ "px";

        }

它只是检查文档高度是否大于页面内容，如果是，它将增加间隔的高度以适应差异。