Spread Out Footer Release For Free

Setting the position of the div at the bottom of its container can be done using the bottom, and position properties. Set the position value to absolute and the bottom value to zero to place a div at the bottom of the container.

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">

Removing the space between your content and your footer Click the first element on the page (i.e. a Container or Image) Look for the Margins setting in the Settings section of the right sidebar. Disable the "linked axis" option. Set a negative margin on the bottom (i.e. -50px)

On the Page Layout tab of the ribbon, in the Page Setup group, click Margins > Custom Margins... Set Top, Header, Bottom and Footer to 0, then click OK.

The footer displays after the main content so you have to add more content to push the footer to the bottom or use this CSS code in Appearance > Customize > Additional CSS to make the footer stick at the bottom.

The reason your footer is only halfway down the page with position: absolute is that you haven't set a min-height on the body and html elements. Without that, the body only takes up as much space as you have content for it -- and then the footer is aligned with that bottom, not the bottom of the window.

You can use flexbox to ensure that the footer is always at the bottom of the page. This is done by setting the giving the body element min-height: 100vh , display: flex and flex-direction: column .