stackoom
  简体   繁体   中英

My footer is stuck at the top

 原文  2015-12-01 16:20:23  6   3    html/ css/ footer

Question

fiddle

My footer is stuck at the top and i want it at the bottom. But I've got everything at the bottom and it doesn't work. I've tried many different things that don't seem to work and it's getting frustrating. Any help would be appreciated. 

/*===========================================
============================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 answers

solution1
 1 ACCPTED  2015-12-01 16:40:28

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

--just you need to change position: relative; to position: absolute; in footer class

Thank you

solution2
 0  2015-12-01 16:42:58

Use this CSS Property 

footer {
  position: absolute; 
}

instead of 

footer {
  position: relative;
}

solution3
 0  2015-12-01 17:02:13

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question why is my site's footer stuck to the top of my page? My footer is stuck at the bottom of the viewport Stuck with the responsivness of my footer page My footer is hanging out at the top Why is my footer floating to the top? My footer overlaps the content of the web and gets stuck Why is my footer showing on top of my page? Why is my footer displaying at the top of my page? Why is my footer appearing at the top of the page How to get my footer at the bottom instead of the top?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM