We can make the section-footer sticky in Omega theme by adding the following piece of code in <your-theme>-alpha-default.css.
/* sticky footer */ html, body {height: 100%; margin: 0;} #page {display: table; width: 100%;} html>/**/body #page {height: 100%;} *:first-child+html #page {height: auto;} .section {display: table-row;} html>/**/body .section-content {height: 100%;} *:first-child+html body .section-content {height: auto;}
Kudos to Karl Kasischke.
Done =)
Reference: Has anyone tried to get a sticky footer to work with Omega?
Thanks so much for this quick and easy solution!
LikeLike
You are welcome. =)
LikeLike
thanks, it’s a great and simple solution
LikeLike
Ya, thanks Karl Kasischke.
LikeLike
Great Solution!! thanks a lot!
LikeLike
thanks for your comment. =D
LikeLike
Simply Superb!… Awesome.
LikeLike
You are welcome. =D
LikeLike
Thanks!! One question, by changing the attributes does it works the other way around for the header?
LikeLike
For header, you could just use position: fixed; to make it sticky on top.
LikeLike
Hello, quick question. When I do this it leaves a blank space between my content and my footer if the page is not long enough. Is there any way I can also expand the content div? I’ve been trying to figure it out, not getting far.
Thanks
LikeLike
do you want to disable the sticky footer when your content is not long enough?
LikeLike
Ideally the content section would expand, so the footer is on the bottom of the page, and there is just empty content background between the bottom of the content and the top of the footer (instead of white space).
LikeLike
how about setting a background-color on <body> instead of the content div?
LikeLike