Question

我的页面底部有一个页脚，页脚顶部有一个方框广告和一个表单。这三个元素通过位置绝对间隔开（仅在我的屏幕尺寸上）。每当我更改浏览器大小时，我都会将其设置为使页脚远离广告并且不会重叠。我的表单在调整大小时永远不会与我的广告重叠，它适用于所有屏幕尺寸。另一方面，我的页脚在不同的屏幕尺寸上重叠我的广告，我不想花时间在我的所有页面上添加媒体查询来修复此问题。如果屏幕尺寸较小，则页脚将重叠或在底部向下。此外，每当用户打开屏幕宽度大于500的页面时，广告就会成为水平广告，留下空白空间并使网站在底部不吸引人。这是我的css代码示例：

#footer{
    position: absolute;
    left: 0px;
    right: -2px;
    bottom: -300px;
    margin-bottom: -400px;
    background-color: black;
    width: 100%;
    height: 200px;
}

媒体查询：

@media screen and (max-width: 1050px)
{
#footer{
    margin-bottom: -500px;
    }

}

我还有另一个页脚（mobFooter）出来并隐藏原始页脚。此页脚适用于移动设备。我正在做同样的事情，有媒体查询，而且它没有成功。如何使页脚始终位于底部并且它们与广告之间有一定的空间？此外，如果广告成为水平广告（框到水平），如何让页脚占用未使用的空间？

HTML code：

 <div id="ad2">
       <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- YC ads -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4549632347845332"
     data-ad-slot="4159114047"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
        </div>

    <div id="footer">
    <div id="mobFooter">
            <a href="/submit"><p>Home</p></a>
            <hr>
            <a href="/submit/normal"><p>Normal Submit</p></a>
            <hr>
            <a href="/submit/premium"><p>Premium Submit</p></a>
            <hr>
            <p><a href="/submit/advertising">Advertising</a>   |   <a href="/submit/help/contact.php">Contact us</a></p>
            <hr>
            <p><a href="/submit/help/terms.html">Terms</a> | <a href="/submit/help/policy.html">Privacy</a></p>
        </div>
         <div id="social">
         <ul>
             <li><img src="/submit/assets/facebook.png"/></li>
             <li><img src="/submit/assets/twitter.png"/></li>
             <li><img src="/submit/assets/youtube.png"/></li>
             </ul>
         </div>
        <img src="/submit/assets/logo.png"/>
         <ul>
         <li>Home</li>
             <li>Normal Questions</li>
             <li>Premium Questions</li>
             <li>Advertising</li>
         </ul>
         <div id="policies">
         <ul>
             <li>Terms of Use</li>
             <li>Privacy</li>
             <br>
             <li id="net">Contact us</li>
        </ul>
         </div>

         </div>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="/submit/validation.js"></script>

我已经包含了我的广告所在的HTML代码以及我的页脚和mobFooter所在的位置。注意：mobFooter会被隐藏，直到屏幕大小达到500px。

Answer 1

<div id="ad2">
       <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- YC ads -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4549632347845332"
     data-ad-slot="4159114047"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
        </div>

    <div id="footer">
    <div id="mobFooter">
            <a href="/submit"><p>Home</p></a>
            <hr>
            <a href="/submit/normal"><p>Normal Submit</p></a>
            <hr>
            <a href="/submit/premium"><p>Premium Submit</p></a>
            <hr>
            <p><a href="/submit/advertising">Advertising</a>   |   <a href="/submit/help/contact.php">Contact us</a></p>
            <hr>
            <p><a href="/submit/help/terms.html">Terms</a> | <a href="/submit/help/policy.html">Privacy</a></p>
        </div>
         <div id="social">
         <ul>
             <li><img src="/submit/assets/facebook.png"/></li>
             <li><img src="/submit/assets/twitter.png"/></li>
             <li><img src="/submit/assets/youtube.png"/></li>
             </ul>
         </div>
        <img src="/submit/assets/logo.png"/>
         <ul>
         <li>Home</li>
             <li>Normal Questions</li>
             <li>Premium Questions</li>
             <li>Advertising</li>
         </ul>
         <div id="policies">
         <ul>
             <li>Terms of Use</li>
             <li>Privacy</li>
             <br>
             <li id="net">Contact us</li>
        </ul>
         </div>

         </div>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="/submit/validation.js"></script>




$(document).ready(function(){
    var footerHeight=$("#footer").height();
    $("body").css("padding-bottom",footerHeight);
});
$(window).resize(function(){
    var footerHeight=$("#footer").height();
    $("body").css("padding-bottom",footerHeight);
});



body{position: relative;}
#footer{
    position: absolute;
    left: 0px;
    right: -2px;
    bottom: 0;
    background-color: black;
    width: 100%;
}

Refer Fiddle

刚刚使用jquery来识别页脚的高度，并使用了底部的填充底部

如何使页脚不重叠并正确定位？

1 个答案: