Monday, January 20, 2020

Simple sticky bottom footer

Simple sticky bottom footer example with text-overflow hidden with ellipses.



full source code

<!doctype>
<html><head><title>Sticky Bottom Footer</title>
<style>
#content {
 text-align: center;
}
#google_promo {
 bottom: 30px;
    left: 0; 
    position: fixed;
    right: 0;
    text-align: center;
    transition: bottom 400ms;
}
.promo-content {
 border: 1px solid #ccc;
 border-radius: 16px;
 display: inline-block;
 padding: 0 16px;
 width: 237px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

</style>
</head>
<body>
<div id="content">
 <h1>Simple Sticky Bottom Footer</h1>
 <div id="google_promo">
  <div class="promo-content">
   Hello, I am a sticky footer. It's simple to create me.
  </div>
 </div>
</div>
</body>
</html>