html - 页脚 HTML 在小屏幕中重叠元素

Question

我的页脚有问题。当页面在大屏幕上加载时，没有重叠。当使用小屏幕时，页脚与元素(下载按钮)重叠，这是因为在小屏幕中页脚变得更高(文本将被换成多行)。

这是我在不同屏幕上看到的:

页脚的代码是:

<div class="footer" >
    <div class="container-fluid" style="font-size: 90%">
        <div class="row">
            <div class="col-md-1 offset-1 text-center">
                <a href="http://www.my.site.com">
                    <img style="max-height: 25px; margin-top: 15%; margin-bottom: 15%" src="/images/resources/logo-blah.png">
                </a>
            </div>
            <div class="col-md-8">
                <span class="text-muted">Long text here... 
                    <a href="http://my.site.com">BLAH</a>. © <?php echo date("Y"); ?>
                </span>
            </div>
            <div class="col-md-1 text-center">
                <a href="http://my.site.com">
                    <img style="max-height: 25px; margin-top: 15%; margin-bottom: 15%" src="/images/resources/BLAH_logo.png">
                </a>
            </div>
        </div>
    </div>
</div>

风格是:

body {
    background: linear-gradient(45deg, #177396, #0cc1b3);
    margin-bottom: 10%;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #e6e6e6;
    padding: 24px;
    font-size: 12px;
    color: #CCC;
}

The question

我希望该元素保持在最后一个元素(它上面的那个)的下方而不与它重叠。即使页脚元素向上拉伸(stretch)，有没有办法避免重叠？

Answer 1

您应该避免对此类主要布局元素进行绝对定位。如果布局中有粘性页眉或页脚，您将在较小的屏幕上遇到此类问题。

一种可能的解决方案是去掉媒体查询中的 position: absolute 以仅针对移动设备(或小屏幕设备)。这样，只有在向下滚动页面后才能看到页脚。