Responsive Sticky Footer with HTML/CSS

Responsive Sticky Footer

I am sure, You have already tried out many HTML & CSS sticky footer tutorials but What about this one which is fully responsive and works well on all mobile device.

The sticky is the new way of showing footer at your website. It keeps the footer at the bottom of the page. We do require the stick footer when we have less content on the page.

Not only this But it also depends upon the screens sizes. Like if you view a website on large screen Tv, you will see a white space at the bottom of footer even if the site has much content.

The footer that fixed at the bottom area of web page always require where you have more or less content. There are many approaches to fix the position of the footer.

We already write an article about one of Flex method for sticky Footer in details and also explain you few of different possibility creating a simple sticky CSS footer.

How to Make Responsive Sticky Footer with CSS032

This footer is fully responsive and works well on all small or large Tv devices. You can easily3 adjust the height of footer by editing one line of CSS.

Let’s see the HTML, and we have a wrapper which will be our top area of the website. You can define the header and content area inside the wrapper.

<div id="wrapper">
  <div id="container">
    <p>Clean Sticky Footer SCSS Mixin</p>
  </div>
</div>

Next, We have a footer. We keep the footer separate from the wrapper so you can easily edit it and make it full width if you need.

<div id="footer">
	<ul>
    	<li>Home</li>
        <li>Products</li>
        <li>Shop</li>
        <li>Items</li>
        <li>Buy</li>
    </ul>
</div>

General Styling

Let’s take a look at the CSS. We start the CSS by setting the height: 100%; for both body and HTML.

html, body {
  height: 100%;
   font-family: lato;
}

The technique we are going to set the margin-bottom . It is depended upon the height of footer we want.

Ok, Here we make the wrapper height to 100%.

#wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin-bottom: -30px;
   background: #f1f1f1;
}

For the footer, We need to set the height and height should be equal to the margin-bottom which we laid down for the wrapper. In our case both are 30px;

#footer {
  background: #0d8788;
  height: 30px;
}

We have prepared the demo, So you know how exactly footer work while sticky it at the bottom of the page.

Code ExamplesYou May Also Like