how to keep the footer down

Question

this is the footer

#footer {
  position: absolute;
  width: 100%;
  height: 10%;
  margin-top: 1%;
  bottom: 0px;
  top: 99%;
}
#copyright {
  float: left;
  font: normal normal normal 12px/1.3em Arial, 'ms pgothic', helvetica, sans-serif;
  color: #616060;
  margin-left: 15%;
}
#linkedin {
  float: right;
  margin-right: 15%;
  color: #043551;
  font: normal normal normal 20px Arial, 'ms pgothic', helvetica, sans-serif;
}

<div id="footer">
  <div id="copyright">
    © 2016 copmpany
  </div>
  <div id="linkedin">
    Follow us on
    <a href="https://www.linkedin.com/">
      <img alt="LinkedIn" src="http://i.imgur.com/DqA6suH.png">
    </a>
  </div>
</div>

This how it looks like. This how it should look like. I don't want to use position:absolute and I want to make it work on all screens, and all pages of the website. If i use absolute, then when I'm using the phone it will go down too much.

I have tried everything, including using .container{ max-height:140%;} and put the footer 99% that distance but didn't work, nothing worked. I can't use fixed position because on the services page that I linked to, the height goes to 130% on some screens.

`bottom: 0px; top: auto;` OR why giving `top` just use `bottom` and remove `top`, also you've to add `padding-bottom` to the main container to make space for your footer. — vivekkupadhyay, Aug 11 '16 at 12:13
You have `html, body{height:100%}` in your css. Change that to `min-height`. Your wrapper div blows passed the 100% and is causing problems. You can also set your footer to have a position of `relative`. `absolute` is only good for when you have a lack of content, which you don't. — Drew Kennedy, Aug 11 '16 at 12:16
@VishalPanara no, if he fixes the footer, it will not be on the bottom of the website but on the bottom of the screen. It will be always here even if he's not at the bottom of the website. — Relisora, Aug 11 '16 at 12:17
@vivekkupadhyay thanks for the tips, it's working now on all screens except the index — Lynob, Aug 11 '16 at 12:22
@DrewKennedy also thanks for the tips, the index needs fixing — Lynob, Aug 11 '16 at 12:22
@Lynob tell me if that's the answer you wanted i'll post it as one — Relisora, Aug 11 '16 at 12:24
@Relisora adding a padding-bottom and a min-height fixed the problem on all screens except one — Lynob, Aug 11 '16 at 12:32
@Lynob You can only have one `....` and one `...` and one ` ` on the page. http://stackoverflow.com/a/2035627/2813224 — zer00ne, Aug 11 '16 at 12:34
@Lynob Ok, i posted my answer anyway in case it could help someone reading this post. I see the problem on index. Your code is very _weird_, are you using a tool to generate it ? — Relisora, Aug 11 '16 at 12:42

score 2 · Answer 1 · answered Aug 11 '16 at 12:36

You can change position:absolute; to position:fixed; Check the code in this link: https://jsfiddle.net/4qyojap2/

#footer{
  background: #F3F5F6;
  position: fixed;
    width: 100%;
    height: 30px;
    padding:20px;
    bottom: 0px;
}
#copyright{
  float: left;
  font: normal normal normal 12px/1.3em Arial,'ms pgothic',helvetica,sans-serif;
    color: #616060;
    margin-left: 15%;
}
#linkedin{
  float: right;
  margin-right: 15%;
  color: #043551;
  font: normal normal normal 20px Arial,'ms pgothic',helvetica,sans-serif;
}

score 2 · Accepted Answer · answered Aug 11 '16 at 12:52

This page will never work exactly the way you want it to because it isn't valid. You can only have one <!doctype html>, one <html>, one <head>, and one <body> on a page and in that particular order.

This is a waste of time until you fix that problem first. Run your page through this: VALIDATOR

<!doctype html>
<html>
<head>
   <!--<link>, <script>, <style>, <title>, <meta> are typically here.-->
</head>
<body>
    <!-- Your content <div>, <p>, <span>, etc. goes here.-->
</body>
</html>

Your page looks like this:

<!DOCTYPE html>
 <html>
 <head>
 <title>Services</title>
 </head>
 <body>
 <div class="index_wrapper">
 <!DOCTYPE html>
 <html>
 <head>
 <link rel="stylesheet" type="text/css" href="styles.css">
 <title></title>
 </head>
<body>

   <!------CONTENT------>

</body>
</html>

<div class="container">
<div class="service_title">
</div>

<table>
    <!--CONTENT INSIDE A TABLE LAYOUT WITH INLINE STYLES---->
</table>





</div>
</div>
</div>

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div id="footer">
<div id="copyright">
© 2016 Tycron Solutions
</div>
<div id="linkedin">
    Follow us on <a href="https://www.linkedin.com/company/tycron-solutions">
<img alt="LinkedIn" src="http://i.imgur.com/DqA6suH.png">
</a>

</div>
</div>
</body>
</html></div>
</body>
</html>

score 1 · Answer 3 · answered Aug 11 '16 at 12:32

Your css says :

bottom: 0px;
top:99%;

This is not needed as your div already is at the bottom of your HTML. The footer will position correctly if you suppress these two lines.

New CSS here :

#footer{
  position: absolute;
    width: 100%;
    height: 10%;
    margin-top: 1%;
}
#copyright{
  float: left;
  font: normal normal normal 12px/1.3em Arial,'ms pgothic',helvetica,sans-serif;
    color: #616060;
    margin-left: 15%;
}
#linkedin{
  float: right;
  margin-right: 15%;
  color: #043551;
  font: normal normal normal 20px Arial,'ms pgothic',helvetica,sans-serif;
}

score 1 · Answer 4 · answered Aug 11 '16 at 12:45

Have you tried this

#main-body{height:100vh;}

<header role="header">
 <nav role="navigation">
   <a href="#">Home</a>
 </nav>
</header>
<div id="main-body">
  this is the main body
</div>
<footer role="footer">
  this is the footer
</footer>

or you can use jQuery on it like,

//declare height of the "#main-body"
$("#main-body").css('height' : $(window).height()+'px');

Hope this help. Cheers!

how to keep the footer down

4 Answers4