fbpx

An Exclusive Offer For You To Grab JD Builder Pro Check Deal of The Day

Welcome, Guest
Username: Password: Remember me

Need a new feature in Astroid?

Submit feature requests on github and help improve Astroid.

Submit Now
  • Page:
  • 1
  • 2

TOPIC: (SOLVED)How to make footer stick to the bottom of the page

How to make footer stick to the bottom of the page 9 months 5 hours ago #12412

  • chandandeep
  • chandandeep's Avatar
  • Online
  • Administrator
  • Posts: 3205
  • Thank you received: 508
  • Karma: 84
Hello,

Please try the following code.

html,
body,
.body-wrapper {
	height: 100%;
	margin: 0;
}

.layout-boxed .body-innerwrapper {
	min-height: 100%;
	background-color: transparent;
	box-shadow: none;
}

Thanks,
Chandan
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.

To know more about products check out the their documentation.
The topic has been locked.
The following user(s) said Thank You: tcn

How to make footer stick to the bottom of the page 8 months 4 weeks ago #12443

  • tcn
  • tcn's Avatar
  • Offline
  • Senior Member
  • Posts: 65
  • Thank you received: 3
  • Karma: -6
Almost! :woohoo:

I added the required negative top margin for the footer. Otherwise it drops off the screen. I also removed the transparent background. But, that's a personal preference, depending on whether you want the background to shine through or not.

html,
body,
.body-wrapper {
	height: 100%;
	margin: 0;
}

.layout-boxed .body-innerwrapper {
	min-height: 100%;
	box-shadow: none;
}
footer {
        margin-top: -64px;
}

Thanks a million!
The topic has been locked.

How to make footer stick to the bottom of the page 8 months 4 weeks ago #12444

  • tcn
  • tcn's Avatar
  • Offline
  • Senior Member
  • Posts: 65
  • Thank you received: 3
  • Karma: -6
Just a note for other readers searching for a solution: the negative margin-top value depends on the height of your footer + padding. Use the layout inspector to determine the values. On our production site, the footer height is a little smaller, so I needed -60px there.
The topic has been locked.
  • Page:
  • 1
  • 2
Moderators: chandandeep
Time to create page: 0.247 seconds