我的页脚卡在顶部

时间：2015-12-01 16:20:23

标签： html css footer

fiddle

我的页脚卡在顶部，我希望它在底部。但是我已经把所有东西都放在了最底层而且它不起作用。我尝试了很多不同的东西，似乎不起作用而且令人沮丧。任何帮助，将不胜感激。 

/*===========================================
============================FOOTER===========
============================================*/
footer .insta_hover,
footer .fb_hover,
footer .twitter_hover{
    display: block;
    position: relative;
    height: 45px;
    width: 42px;
    color: #000;
    font: 1.6em/1.3 Helvetica, Arial, sans-serif;
    margin-left: 5px;
    z-index: 2;
    float: left;
    top: -10px;
    margin-top: 1px;
}

footer .fbhover{
    margin-top: 27px;
}


footer .icon_container{
    position: absolute;
    right: 260px;
    z-index: 500;
    padding:0;
    float:right;
    width:auto;

}


.copywrite{
    color: #999;
    /*font: 10px/36px 'brandon-grotesque';*/

    font-weight: 400;
    letter-spacing: 1px;
    margin-bottom: 0px;
    text-transform: uppercase;
    text-align: left;
    float: left;  
    position: relative;
    top: 8px;      
}
.Find{
        color: #999;
    /*font: 10px/36px 'brandon-grotesque';*/

    font-weight: 400;
    letter-spacing: 1px;
    margin-bottom: 0px;
    text-transform: uppercase;
    text-align: left;
    float: left;  
    position: relative;
    top: 8px;    
    left:1000px
}

/* 
Footer-Styles 
*/  

footer {
    clear: both;    
    font-size:0.8em;  
    background:#333;
    min-height: 70px;
    position: relative;
    min-width: 1000px;
    margin: 0 auto;
    bottom:0;

}  
/* 
Sticky Footer 
*/

footer a{
    color:#FFFFFF;
    text-decoration:none;

}
footer li{
    display:inline;

}

footer .container {
    padding-top:20px;
}

p{
    left:80px;
    top:200px;
}





 <footer>
  <div class="container">
    <p class="copywrite">
      © 2015 www.imadgames.com All Rights Reserved.   </p>  

    <div class="icon_container">
      <ul class="hover_block">
        <li>
            <a href = 'https://twitter.com/' class="twitter_hover"><img src="img/twitter_icon.png" alt="Imad Games @ twitter" style="bottom: 0px;"></a>
            <a href = 'https://www.facebook.com' class="fb_hover"><img src="img/Facebook_icon.png" alt="Imad Games @ facebook" style="bottom: 0px;"></a>   
            <a href = 'https://www.instagram.com/_imadinho_/' class="insta_hover"><img src="img/insta_icon.png" alt="Imad Games @ instagram" style="bottom: 0px;"></a>        

        </li>
      </ul>
    </div>
  </div>
</footer>
 </body>
</html>

3 个答案:

答案 0 :(得分：1)

＆＃13;
＆＃13; 
footer .insta_hover,
footer .fb_hover,
footer .twitter_hover{
    display: block;
    position: relative;
    height: 45px;
    width: 42px;
    color: #000;
    font: 1.6em/1.3 Helvetica, Arial, sans-serif;
    margin-left: 5px;
    z-index: 2;
    float: left;
    top: -10px;
    margin-top: 1px;
}

footer .fbhover{
    margin-top: 27px;
}


footer .icon_container{
    position: absolute;
    right: 260px;
    z-index: 500;
    padding:0;
    float:right;
    width:auto;

}


.copywrite{
    color: #999;
    /*font: 10px/36px 'brandon-grotesque';*/

    font-weight: 400;
    letter-spacing: 1px;
    margin-bottom: 0px;
    text-transform: uppercase;
    text-align: left;
    float: left;  
    position: relative;
    top: 8px;      
}
.Find{
        color: #999;
    /*font: 10px/36px 'brandon-grotesque';*/

    font-weight: 400;
    letter-spacing: 1px;
    margin-bottom: 0px;
    text-transform: uppercase;
    text-align: left;
    float: left;  
    position: relative;
    top: 8px;    
    left:1000px
}

/* 
Footer-Styles 
*/  

footer {
    clear: both;    
    font-size:0.8em;  
    background:#333;
    min-height: 70px;
    position: absolute;
    min-width: 1000px;
    margin: 0 auto;
    bottom:0;

}  
/* 
Sticky Footer 
*/

footer a{
    color:#FFFFFF;
    text-decoration:none;

}
footer li{
    display:inline;

}

footer .container {
    padding-top:20px;
}

p{
    left:80px;
    top:200px;
}
＆＃13; 
 <footer>
  <div class="container">
    <p class="copywrite">
      © 2015 www.imadgames.com All Rights Reserved.   </p>  

    <div class="icon_container">
      <ul class="hover_block">
        <li>
            <a href = 'https://twitter.com/' class="twitter_hover"><img src="http://www.heart.org/idc/groups/heart-public/@wcm/@global/documents/image/ucm_300157.png" alt="Imad Games @ twitter" style="bottom: 0px;"></a>
            <a href = 'https://www.facebook.com' class="fb_hover"><img src="http://www.royalgoldphones.com/images/fb.png" alt="Imad Games @ facebook" style="bottom: 0px;"></a>   
            <a href = 'https://www.instagram.com/_imadinho_/' class="insta_hover"><img src="https://annaconnerandco.files.wordpress.com/2013/04/instagram-icon-32px.png" alt="Imad Games @ instagram" style="bottom: 0px;"></a>        

        </li>
      </ul>
    </div>
  </div>
</footer>
＆＃13;
＆＃13;
＆＃13;

- 只需要在页脚类中将位置：相对; 更改为位置：绝对;

谢谢

答案 1 :(得分：0)

使用此CSS属性

--exclude=origin/build_* --remotes

而不是

footer {
  position: absolute; 
}

答案 2 :(得分：0)

@charset "utf-8";
* {
    margin: 0;
    padding: 0;
}
html,
body {
    height: 100%;
}
#container {
    min-height: 100%;
    margin-bottom: -330px;
    position: relative;
}
/*=====================
 ====Fonts-Styles ====
 ====================*/

@font-face {
    font-family: "Montserrat-Bold";
    src: url('fonts/Montserrat-Bold.otf');
}
@font-face {
    font-family: "Montserrat-Reg";
    src: url('fonts/Montserrat-Regular.otf');
}
/*=====================
 ====Background-Styles ====
 ====================*/

#search {
    width: 400px;
    height: 45px;
    position: absolute;
    z-index: 2;
    left: 37%;
    top: 90px;
    text-align: center;
    color: #ffcd00;
}
h2.headline {
    font: 2.3em 'Montserrat-Bold', sans-serif;
    color: #ffffff;
    text-align: center;
    line-height: 0.75em;
    margin-top: 130px;
    text-transform: uppercase;
}
body {
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
    margin: 0px;
    padding: 0px;
    background-color: #FFF;
    font-family: 'Montserrat-Reg', sans-serif;
    min-width: 950px;
    background-image: url("img/background.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}
#logo {
    background-image: url(img/Logo.png);
    background-repeat: no-repeat;
    position: absolute;
    top: 0px;
    right: 1630px;
    width: 175px;
    height: 175px;
    display: block;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}
.nav {
    height: 35px;
    z-index: 4px;
    top: 40px;
    position: absolute;
    right: -20px;
    width: 505px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 20px;
    width: 1950px;
    height: 35px;
    font-size: 18px;
    font-family: 'Montserrat-Bold', sans-serif;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 3px 2px 3px #333333;
    background-color: #303030;
    border-radius: 8px;
}
.nav ul {
    height: auto;
    padding: 5px 0px;
    margin: 0px;
}
.nav li {
    display: inline;
    padding: 7px;
}
.nav a {
    text-decoration: none;
    color: #ffffff;
    padding: 11px 11px 11px 11px;
}
.nav a:hover {
    color: #ffcd00;
}
/*========TABLES & FORMS=======*/

table,
td,
th {
    border: 1px solid white;
    padding: 10px;
    background-color: #221f20;
    color: #ffffff
}
#tables {
    top: 190px;
    right: 35%;
    position: absolute;
    width: 600px;
    border-bottom: 3px solid #ffcd00;
    margin: auto;
    text-align: center;
}
#resform {
    width: 400px;
    height: 45px;
    position: absolute;
    z-index: 7;
    left: 39%;
    top: 220px;
    text-align: center;
    color: #ffcd00;
    margin: 0 auto;
}
/*===========================================
============================FOOTER===========
============================================*/

footer {
    clear: both;
    font-size: 0.8em;
    background: #333;
    min-height: 70px;
    position: absolute;
    min-width: 1000px;
    margin: 0 auto;
    bottom: 0;
}
footer .icon_container {
    position: absolute;
    right: 260px;
    z-index: 500;
    padding: 0;
    float: right;
    width: auto;
}
.copywrite {
    color: #999;
    /*font: 10px/36px 'brandon-grotesque';*/

    font-weight: 400;
    letter-spacing: 1px;
    margin-bottom: 0px;
    text-transform: uppercase;
    text-align: left;
    float: left;
    top: 8px;
}
.Find {
    color: #999;
    /*font: 10px/36px 'brandon-grotesque';*/

    font-weight: 400;
    letter-spacing: 1px;
    margin-bottom: 0px;
    text-transform: uppercase;
    text-align: left;
    float: left;
    top: 8px;
    left: 1000px
}
/* 
Footer-Styles 
*/

footer {
    clear: both;
    font-size: 0.8em;
    background: #333;
    min-height: 70px;
    position: absolute;
    min-width: 1000px;
    margin: 0 auto;
    bottom: 0;
}
/* 
Sticky Footer 
*/

footer a {
    color: #FFFFFF;
    text-decoration: none;
}
footer li {
    display: inline;
}
footer .container {
    padding-top: 20px;
}
p {
    left: 80px;
    top: 200px;
}
相关问题
最新问题