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;
}

问题

我希望元素保持在最后一个元素（它上面的元素）之下而不重叠它。即使页脚元素向上伸展，有没有办法避免重叠？

Answer 1

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

一种可能的解决方案是摆脱媒体查询中的position: absolute以仅定位移动设备（或具有小屏幕的设备）。这样只有在向下滚动页面后页脚才会显示。

Answer 2

只有在这个特定情况/问题中，我才使用media queries：

解决了这个问题

@media all and (min-width:0px) and  (max-width: 799px) {

   .myElement {
       margin-top: 350px;
   }

}

区分小屏幕和大屏幕，相应地改变最合适的屏幕。

页脚HTML重叠小屏幕中的项目

2 个答案: