martin j martin j - 2 months ago 5
CSS Question

force footer bottom with responsive design

I have a footer that only stick to the bottom when the page is long, but if the page is too short the footer sticks at the middle of the page. I have seen a few methods where they set

margin:0 atuo -180px;
in a
.wrapper
class. However this can be a problem since my footer height change depending on resolution (responsive design). also setting the
.footer
class
position:fixed;
and
bottom:0;
works, but it then overlap the content of the long pages.

My footer is not 100% done and im planning on making each of the
.item
classes side by side on big screens but bellow each other on smaller screens like phones. This will make the footer height even longer wich is why i have a problem setting the height
.footer
height and
.wrapper
margin "static".

css:

.footer {
width:100%;
background-color:#23282c;
position: relative;
margin:auto;
min-height:180px;
z-index:15;
}

.footer-bottom-wrapper {
display:inline-block;
margin-bottom: 0;
width:100%;
}
.footer-bottom {
background-color:#1e2327;
font-size:11px;
line-height:25px;
color:#777f8c;
position:absolute;
bottom:0;
width:100%;
height:25px;
width:100%;
z-index:9;
}



.item {
position:absolute;
left:220px;
display:inline-block;
}

.i1 {
position:relative;
float:left;
width:20%;
padding-top:7px;
margin-left:-210px;
padding-right:190px;
font-size:15px;
display:inline-block;
}

.i2 {
position:relative;
float:left;
width:20%;
padding-top:7px;
margin-left:-150px;
padding-right:190px;
font-size:15px;
display:inline-block;
}

.i3 {
position:relative;
float:left;
width:20%;
padding-top:7px;
margin-left:-150px;
font-size:15px;
display:inline-block;
}

.item h1 {
color:#fff;
border-bottom:1px solid #475f93;
font-size:18px;
text-align:left;
}

.item .p {
color:#777f8c;
}

.footer-link {
color:#777f8c;
margin-left:5px;
margin-right:5px;
}

.footer-link:hover {
color:#fff;
}


wrapper and body css:

* { margin:0; padding:0; }
html { overflow:auto; height:100%; }
body { background-color: #e9ebee; margin:0; padding:0; font-size:10px; cursor:default; height:100%; }
body, html {font:13px "open sans",sans-serif; overflow-x:hidden;}

/* Base Styles
********************************************************************* */
html {
font-size: 62.5%;
width: 100%;
height: 100%;
}
body {
background: #e9ebee;
height: 100%;
font-size: 1.5em;
line-height: 1.6;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
color: #222;

}


footer.php:

<footer class="footer" id="footer">

<div class="item i1">
<h1>Subscribe</h1>
<div class="p">
<form method="POST" action="/assets/php/subscribe.php">
<label>Subscribe to our newsletter!</label><br />
<input type="email" class="footer-input" name="sub-email" placeholder="E-mail">

<div style="margin-top:5px;"></div>
<input type="submit" value="Subscribe" class="btn" name="subscribe" style="width:100%;"/>
</form>
</div>
</div>


<div class="item i2">
<h1>Help</h1>
<div class="p">
Need any help?<br />
You can find a help page<a href="/help" class="footer-link">here</a>.
</div>
</div>


<div class="item i3">
<h1>Server</h1>
<div class="p">
About our server
</div>
</div>


<div class="footer-bottom-wrapper">
<div class="footer-bottom">
<div class="fl">
<a class="footer-link" href="/help">Help</a> |
<a class="footer-link" href="/ads">Advertise</a> |
<a class="footer-link" href="/Rules">Rules</a> |
<a class="footer-link" href="/Terms-Of-Service">Terms Of Service</a> |
<a class="footer-link" href="/credit">Credits</a>
</div>
<div class="footer-fr" style="padding-right:10px;">&copy; Copyright <?php echo $domain; ?> | 2015 - <?php echo date("Y") ?></div>
</div>
</div>
</footer>

<!-- Script that requier bottom! -->
<script type="text/javascript" src="/assets/script/notification.js"></script>
<script type="text/javascript" src="/assets/script/level-bar.js"></script>


<?php if(isset($_SESSION['user'])){ ?>
</div>
<?php }else{ ?>
</div>
<?php } ?>

Answer

I often use a sticky footer which is position: absolute; with a fixed height (e.g. height: 120px;) in desktop mode. The content area get a padding-bottom accordingly to the footer height to prevent overlap.

In mobile mode the footer change from position: absolute; to position: relative;, and the height is now height: auto;. The padding-bottom must be removed from the content area also.

#content {
    padding-bottom: 120px;
}
#footer {
    position: absolute;
    bottom: 0;
    left: 0;
    widht: 100%;
    height: 120px;
}
@media screen and (max-width: 767px) {
    #content {
        padding-bottom: 0;
    }
    #footer {
        position: relative;
        top: auto;
        left: auto;
        height: auto;
    }
}

Basic Example:

html,
body {
  margin: 0;
  height: 100%;
}
#page {
  position: relative;
  min-height: 100%;
  overflow: hidden;
}
#header {
  height: 50px;
  background: yellow;
}
#content {
  padding-bottom: 60px;
}
#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: black;
  color: white;
}
@media (max-width: 400px) {
  #content {
    padding-bottom: 0;
  }
  #footer {
    position: relative;
    bottom: auto;
    left: auto;
    height: auto;
  }
}
<div id="page">
  <div id="header"></div>
  <div id="#content">small content</div>
  <div id="footer">footer content</div>
</div>