页脚仅粘在屏幕底部而不是内容[重复]答案

【问题标题】：Footer Only sticks to bottom of SCREEN not content [duplicate]页脚仅粘在屏幕底部而不是内容[重复]
【发布时间】：2015-02-04 08:38:40
【问题描述】：

我首先要说，我发布这个只是因为这个网站上的任何回复都对这个话题没有任何帮助，因为我已经尝试过给出的解决方案，但它们没有奏效。（如果我错过了，我深表歉意）

链接：nova.it.rit.edu/~whateverokay/index.php

我已经尝试过：

使包装器位置相对并在底部添加任何填充都无济于事。使页脚位置绝对，无济于事。它只进入屏幕底部而不是内容。因此涵盖了很多内容。

我已阅读这些内容：

matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
wordpress.org/support/topic/fixed-footer-covering-content
webdeveloper.com/forum/showthread.php?202513-Position-footer-at-bottom-regardless-of-content-height
本网站上与此相关的任何问题。
还有一些我不记得了，是的，甚至一些网站链接到的粘页脚 (cssstickyfooter.com/)

基本结构：

   <div id="mainHead">
    other divs to hold header
    </div>
    <div id="wrapper">
    <div id="content">
    content here
    </div>
    </div>
    <div id="footer">
    <footer>
    content here
    </footer>
</div>

CSS：

    #wrapper{
position:relative;
min-height:100%;
height:100%;
padding-bottom:0px 0px 100px;
}
#content{
width:60%;
position:relative;
padding:10px;
}
#content, footer{
margin-left:auto;
margin-right:auto;
}
#footer{
font-size:9pt;
font-style:italic;
text-align:center;
overflow:auto;
height:100px;
position:absolute;
bottom:0px;
width:100%;
margin-top:50px;
border-top:4px solid #35475f;
background-color:#35475f;
clear:both;
}
footer{
width:60%;
}

是的，其中一些可能是不必要的，但我一直在尝试一切。 我不能使用：JQUERY 位置固定也不起作用，因为它覆盖了内容。此外，它只需要在内容的末尾。

这是一个学校项目。我有我的限制。必须兼容 IE8。 Javascript 没问题，如果有人知道解决方案的话。

【问题讨论】：

将你的代码绑定到一个div中。

标签： javascript php css html

【解决方案1】：

在顶部创建另一个名为“Container”的 DIV，然后将页脚 DIV 添加到它的末尾

<div id="container">
   <div id="mainHead">
       other divs to hold header
   </div>
    <div id="wrapper">
      <div id="content">
       content here
      </div>
    </div>
    <div id="footer">
     <footer>
        content here
     </footer>
    </div>
</div>

哦，是的，从（几乎所有）中删除所有 CSS 垃圾

【讨论】：