Keep Footer Document For Free

1. First of all, load the Bootstrap 5 framework by adding the following CDN link into the head tag of your HTML page. 3. Finally, define the absolute position for the footer element to set the footer always at the bottom.

In order for this element position at the bottom of the page, you have to add fixed-bottom to the class footer .

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; .

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.

. . . /* Footer */ .footer { position:fixed; bottom:0; left:0; width:100%; height: 90px; background-color: #D0DAEE; } . . . . footer-text-left { font-size:25px; padding-left:40px; float:left; word-spacing:20px; } a.menu:hover { background-color:yellow; font-size:20px; } . . . .

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.

We can use the flexbox to align the footer to the bottom. Here, We have added a height of 100% to the body so that footer can be aligned to the bottom. We have made the body as a flexbox with direction as column.