CODEWITHSUNDEEP
htmlcss
Lynob
Lynob

Reputation: 5327

how to keep the footer down

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.

Upvotes: 1

Views: 743

Answers (4)

zer00ne
zer00ne

Reputation: 43870

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>

Upvotes: 2

Juliver Galleto
Juliver Galleto

Reputation: 9037

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!

Upvotes: 1

snecserc
snecserc

Reputation: 615

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

Upvotes: 2

Relisora
Relisora

Reputation: 1183

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

Upvotes: 1

Related Questions