How to make a sticky footer?

How to make a sticky footer 

By using absolute, the footer and main Container are subject to where you put them. If you use absolute and set the footer to the bottom, it will just stick to the bottom of the viewport. 

Example : 

HTML Code:
 
<html>
<title>Sticky Footer</title>
<head></head>
<body>
  <header>
  </header>
  <main>
  </main>
  <footer></footer>
</body>
</html>

Css Code:

body {
   width: 100%;
   height: 600px;
   color:#fff;
} 
footer {
   width: 100%;
   color: #333;
   height: 60px;
   position: absolute;
   bottom: 0;
} 

That way, the footer always has enough room and is set to the bottom. 

Comments

Post a Comment

Popular posts from this blog

How to install and configure Alphabetic Pagination WordPress Plugin?

Image
Alphabetic Pagination is a WordPress Plugin that helps the users to filter the post/pages and woocommerce products with Alphabet. Its easy to install and configure. You can display horizontally or vertically and Alphabets in lower/uppercase. Click here to download This article will help to install and configure Alphabetic Pagination on your WordPress website. 1. First login to your admin panel, go to the plugin section click on 'add new'.     admin panel -> plugins -> add new 2. Write Alphabetic Pagination in top-right search bar   3.  Click on install and then click on activate, as shown in the  figure(1) above. 4.  Go to settings section click on Alphabetic Pagination. You will see the admin section of Alphabetic Pagination. as shown in the figure(2) below. Now its time to configure simply: 1. Select the position of your page or post page where you want to show pagination, as show in the figure(2) above. 2. T...
Read more

How to Add Google Web Fonts in WordPress Themes the “Right” way

Adding Google Web Fonts in WordPress Themes We have mostly seen folks using the first two methods. The easiest way would be to open your theme’s style.css file and paste the fonts code that you got in the @import tab, like this: @import url(http://fonts.googleapis.com/css?family=Lora); @import url(http://fonts.googleapis.com/css?family=Oswald);     You can also combine multiple font requests into one.  Here is how you would do it:   @import url(http://fonts.googleapis.com/css?family=Lora|Oswald);   This method is super easy but it is not the best way add Google fonts to your WordPress site. Using @import method blocks parallel downloads, which means the browser will wait for the imported file to finish downloading before it starts downloading the rest of the content. If you MUST use @import, then at least combine multiple requests into one.    You will most likely have to edit your header.php file, and paste the followi...
Read more

How to check if it is WooCommerce page?

function is_woocommerce_page () {         if(  function_exists ( "is_woocommerce" ) && is_woocommerce()){                 return true;         }         $wc_keys   =   array (                                         "woocommerce_shop_page_id" ,                                         "woocommerce_terms_page_id" ,              ...
Read more