Stick Footer Text For Free

A sticky footer pattern is one where the footer of your page "sticks" to the bottom of the viewport in cases where the content is shorter than the viewport height.

Method 1: (fixed height footer) Apply display:flex and flex-direction:column to the body . Apply flex:1 ( flex-grow:1 ) to the main element. The main element will grow vertically to occupy any empty space, thus making the footer stick to the bottom.

We set the position of the footer element to fixed to keep it in a fixed position on the page. We set the bottom property of the footer element to 0 to ensure that it is positioned at the bottom of the screen. We set the width of the footer element to 100% to ensure that it spans the entire width of the screen.

Using Flexbox in CSS we can fix it very easily with following steps. First set the min-height of body to 100vh. ... Set the body display to flex display: flex; and flex-direction to column flex-direction: column; . Select footer element (of whatever you want to stick to bottom) and set top margin to auto margin-top: auto; .

Step 1 - Copy and paste the following HTML just below the end of your website's content <footer class="ct-footer"> <div class="container"> <form name="contentForm" enctype="multipart/form-data" method="post" action=""> <div class="ct-footer-pre text-center-lg"> <div class="inner">

Example of creating a sticky footer with Flexbox: In the example above, we used the flex property set to 1 on the child element that we want to grow to fill the content. Next, we'll show one more example where we create a sticky footer with Grid.

Trend goes that developers want to have a sticky footer in their site. If the content is well below the view port, the footer goes out of screen. Otherwise it is visible at the bottom of the screen.