缩小窗口

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％缩放（这是问题 - ＆gt;看到页脚下方的空白区域）：

Answer 1

您的页脚下方有空白空间，因为您网站的主体不足以将页脚向下推到底部。您可以将内容和页脚的最小高度设置为100％。但是你应该确保也设置

html, body {
    height: 100%;
}

因为这些是您内容的父div