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

Question

我的页面底部有一个页脚，页脚顶部有一个框广告，还有一个表单。这 3 个元素通过 position: absolute 很有吸引力地间隔开(仅在我的屏幕尺寸上)。每当我更改浏览器大小时，我都会让页脚远离我的广告并且不会重叠。调整大小时，我的表单绝不会与我的广告重叠，而且它适用于所有屏幕尺寸。另一方面，我的页脚在不同的屏幕尺寸上与我的广告重叠，我不想花时间在我的所有页面上添加媒体查询来解决这个问题。如果屏幕尺寸很小，页脚将重叠或位于底部。此外，每当用户打开屏幕宽度大于 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代码:

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

我已经在广告所在位置、页脚所在位置和 mobFooter 所在位置包含了 HTML 代码。注意:在屏幕尺寸达到 500px 之前，mobFooter 是隐藏的。

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 来识别页脚的高度，并为正文使用 padding-bottom