CSS - bottom sticky position for div element

10 points
Created by:

In this short article we would like to show how to use sticky bottom positioning with pure CSS.

Note: to see better description how sticky works and how to use top positioning read this article.

Simple example:

// ONLINE-RUNNER:browser;

<!doctype html>
    body {
    	max-height: 300px;

    div.content {
    	border: 1px solid orange;
      	height: 1000px;
    div.footer {
        position: -webkit-sticky;  /* <----- required (for WebKit) */
        position: sticky;  /* <------------- required              */
        bottom: 10px;  /* <----------------- required              */
		border: 1px solid red;
      	background: silver;

    <div class="content">
      Some text here...<br />
      Some text here...<br />
      Some text here...<br />
      Some text here...<br />
    <div class="footer">Footer 1</div>
  <p>Some text here...</p>
  <p>Some text here...</p>
  <p>Some text here...</p>


Hey ­čĹő
Would you like to know what we do?
  • Dirask is online IT community for professionals and hobbyist to share their knowledge and help each other in extraordinary easy way.
  • We welcome everyone
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.