CODEWITHSUNDEEP
htmlcss
user3452098
user3452098

Reputation: 298

Unable to make footer stick to bottom

I was designing an basic template for my new script but I am unable to make footer to be at bottom.

demo here

I tried 

position: relative;bottom: 15px;

but its not working the footer is placed in nearby middle of the page please help me resolving this problem. You can edit my template or view the source here.

Upvotes: 3

Views: 464

Answers (7)

Shub
Shub

Reputation: 2694

Warp Up The content in an div

HTML:

<body>
    <div class="page-wrap">

    Content..

    </div>

    <footer>
        Footer Content..
    </footer>

</body>

CSS:

* {
  margin: 0;
}
body,html{
    height: 100%;
}
.page-wrap{
    min-height: 90%;/* Adjust This Value According to your Footer .*/
}

Upvotes: 1

Srinivas
Srinivas

Reputation: 737

If you want your footer to be sticky make the footers position fixed

position:fixed;

If you want it to be at the bottom of the page initially instead of position relative make it absolute

position:absolute;

also you might want to give your body and html 100% height.

Upvotes: 0

misterManSam
misterManSam

Reputation: 24692

There is a great sticky footer I use from CSS-Tricks

I have gone ahead and adapted it for you.

Jsbin link

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Template</title>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/pure/0.4.2/pure-min.css">
</head>
<body>
    <div style="position: relative;text-align: right;right: 50px; top: 15px;">
        <a class="pure-button pure-button-primary" href="?help">Help</a>
    </div>
    <div class="header">
        <h1>Template</h1>
        <h2>basic page.</h2>
    </div>

    <div class="content">

    <h2 class="content-subhead">Enter Link</h2>

    <form class="pure-form pure-form-aligned" action="index.php" method="post">
    <fieldset>
        <legend>To bo bla bla bla Please Enter <code>Link</code> Below.</legend>
        <div class="pure-control-group">
            <label>Link</label>
            <input name="link" type="text" class="pure-input-2-3" placeholder="link" value="" required>
        </div>

        <div class="pure-controls">
            <label class="pure-checkbox">
                <input name="start" type="checkbox"> Start Downloading Instantly.
            </label>
            <button type="submit" class="pure-button pure-button-primary">Generate</button>
        </div>
    <p>To get Help on Using this click <a class="link" href="?help">here</a>. </p>
    </fieldset>
</form>
</div>
<footer class="site-footer">
<p>Script By <a href="#" style="text-decoration: none;color:inherit;">Lorem ipsum</a>.</p>
<p>&copy; 2014 . All rights reserved.</p>
</footer>
</body>
</html>

CSS

html, body {
  height: 100%;
background: #FFF;
}

.header {
       font-family: "omnes-pro", sans-serif;

       padding: 1em;
       text-align: center;
       border-bottom: 1px solid #eee;
       background: #fff;
  }
  .header h1 {
      font-size: 300%;
      font-weight: 100;
      margin: 0;
      color: #4B4B4B;
  }
   .header h2 {
      font-size: 125%;
      font-weight: 100;
      line-height: 1.5;
      margin: 0;
      color: #666;
  }
  .content {

       margin: 0 auto;
  max-width: 768px;
  min-height: 80%;
  /* equal to footer height */
  margin-bottom: -142px;
  }

   .content:after {
   content:"";
  display: block;
  }

  .content .content-subhead {
      font-weight: 300;
      color: #888;

  }

  .link {
  display: inline-block;

  padding-left: 6px;
  text-decoration: none;
  color: #6AB3EC;
  text-shadow: 0 1px 1px rgba(255,255,255,0.9);
  }

  .link:hover {
      color: #3C9CE7;
  }
  .link:before {
      content: "\25BA";
      font-size: 80%;
      display: inline-block;
      padding-right: 3px;
      pointer-events: none;
  }

  .link:hover:before {
      color: #F2BF97;
  }


 .site-footer, .content:after {
  /* .push must be the same height as footer */
  height: 142px;
  width: 300px; margin: 0 auto;

 }

.site-footer { text-align: center;}

Upvotes: 0

Alex Wilson
Alex Wilson

Reputation: 2419

optionally you need replace position:relative; in position: absolute; bottom: 0; it pushes the footer to the bottom of the screen

or a standart solution HTML

<div id="wrap">
    <div id="main" class="clearfix">

    </div>
</div>
<div id="footer">

</div>

CSS

* { margin:0; padding:0; } 
html, body, #wrap { height: 100%; }
body > #wrap {height: auto; min-height: 100%;}
#main { padding-bottom: 150px; }  /* must be same height as the footer */
#footer { 
        position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;} 
/* CLEAR FIX*/
.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Upvotes: 3

PugsOverDrugs
PugsOverDrugs

Reputation: 535

If you want the footer to stay at the bottom even if the page requires scrolling, you can use 

postion: fixed;
bottom: 0px;
left: 0px;

This will make it stick to the bottom left corner.

EDIT: If you want it to be slightly off the bottom just change the value of 'bottom' to the appropriate px or percent.

EDIT (again): To avoid overlap with content you can do something along these lines.

HTML:

<div id='Content'></div>
<div id='Footer'></div>

CSS:

#Content
{
    position: relative;
    height: calc( 100% - 100px );
    height: -webkit-calc( 100% - 100px );
    height: -moz-calc( 100% - 100px );
    overflow-y: scroll;
}

#Footer
{
    position:fixed;
    height: 100px;
    bottom: 0px;
    left: 0px;
}

Upvotes: 4

cjc
cjc

Reputation: 751

This is because your footer is placed at the bottom of the content. You'll need

html {
    height: 100%;
}

You may also need something similar on the body element. Also you will need to use position: absolute; bottom: 0 if you want it to show up at the bottom of the page and not 15px above where it would normally be.

Upvotes: 2

MickyScion
MickyScion

Reputation: 516

i already proved in my page and it works fine

in your css put the code above

#footer {
    clear: both;
    padding: 6px 10px;
    text-align: right;

    position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

and in your page you only call the footer style

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

and there you are! you have your footer...i hope i helped you

Upvotes: 1

Related Questions