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

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代码：

 <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隐藏到屏幕大小达到500 is。

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

参考Fiddle

只使用jquery来识别页脚的高度，并使用填充底部作为主体。