Jump to content
Welcome, Guest
Existing user? Sign In

Sign In



Sign Up
The MatriX
  • Welcome To Ghbsys
  • CS GO Streaming Version is released. Have fun streaming while cheating!
  • Have a Payment Issue? Send us a Support ticket.
  • Make a thread if you need support or join our discord for live support.
  • Have Suggestions? Make a thread and you'll earn Ghbsys Points for implemented suggestions.
  • Join our discord to stay well connected! Don't forget to integrate your discord to the site
  • Welcome to [GHB] - GAmEhAcKbAsTaRdS Forum

    Welcome to [GHB] - GAmEhAcKbAsTaRdS Forum, like most online communities you must register to view or post in our community, but don't worry this is a simple free process that requires minimal information for you to signup. Be apart of [GHB] - GAmEhAcKbAsTaRdS Forum by signing in or creating an account.
    • Start new topics and reply to others
    • Subscribe to topics and forums to get email updates
    • Get your own profile page and make new friends
    • Send personal messages to other members.

    How to make footer stick to the bottom?


    Hasanova
     Share

    Recommended Posts

    Hey i can't stick the footer to the bottom!

     

    Who can help me!?

     

    CSS:

     

    #wrapper {
       position: absolute;
       top: 0;
       left: 0;
    
    }
    
    
    html, body { height: 100%; }
    
    body{
    padding-top: 0px;
    background-color: #01111d;
    color: #FFF;
    font-family: verdana, arial, sans-serif;
    text-align: left;
    letter-spacing: 1px;
    }
    
    #navigation_bar{
    margin-top: 10px;
    clear: both;
    background: #1c1c1c;
    border-bottom: 1px solid #252525;
    border-top: 1px solid #252525;
    -webkit-box-shadow: 0 0 5px #000;
    -moz-box-shadow: -5px 5px 5px #111;
    
    }
    
    #footer{
    margin-top: 10px;
    clear: both;
    background: #1c1c1c;
    border-bottom: 1px solid #252525;
    border-top: 1px solid #252525;
    -webkit-box-shadow: 0 0 5px #000;
    -moz-box-shadow: -5px 5px 5px #111;
    position: relative;       
    }
    
    .logo{
    float: left;
    position: relative;
    margin-left: -15px;
    margin-top: 8px;
    }
    
    a:link {color:#FF0000;}      /* unvisited link */
    a:visited {color:#00FF00;}  /* visited link */
    a:hover {color:#FF00FF;}  /* mouse over link */
    a:active {color:#0000FF;}  /* selected link */
    

     

     

    HTML CODE

     

    <html>
    <head>
    
    <title></title>
    <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
    
    </head>
    <body>
    
    <div id='navigation_bar'>
    </div>
    
    <div id='footer'>
    <center><span style='color:yellow;text-shadow: 0pt 0pt 8px orange; font-size: 11px;'>Copyright (c) All Rights Served </span></center>
    </div>
    
    </body>
    </html>
    
    

     

    Edited by Hasanova
    Link to comment
    Share on other sites

    • 1 month later...

    Late response but here you go:

     

    Try to keep the following HTML format.

    <div id="container">
      <div id="header"></div>
      <div id="body"></div>
      <div id="footer"></div>
    </div>
    

     

    CSS

    body {
      margin:0;
      padding:0;
      height:100%;
    }
    #container {
      min-height:100%;
      position:relative;
    }
    #header { }
    #body {
      padding:10px;
      padding-bottom:60px
    }
    #footer {
      position:absolute;
      bottom:0;
      width:100%;
      height:60px;
      background:#6cf;
    }
    

     

    Footer height and padding bottom of body needs to me the same.

    Link to comment
    Share on other sites

    Guest
    This topic is now closed to further replies.
     Share

    • Recently Browsing   0 members

      • No registered users viewing this page.
    ×
    ×
    • Create New...