页脚仅粘贴到屏幕底部不满足

时间:2014-12-06 04:40:51

标签: javascript php css html5

我首先要说的是,我只是张贴此内容,因为本网站上的任何回复对此主题都没有任何帮助,因为我尝试过的解决方案并没有奏效。 (如果我错过了一个,我道歉)

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

我已经尝试过:

使包装器位置相对并向底部添加任何填充没有帮助。 使页脚位置绝对,没有帮助。它只是在SCREEN的底部没有内容。因此涵盖了很多内容。

我已经阅读了这些内容:

  • 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没问题,如果有人知道解决方案的话。

1 个答案:

答案 0 :(得分:3)

创建另一个名为&#34; Container&#34;在顶部,然后将页脚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垃圾(几乎所有的东西)