Jump to content

How to create a sticky footer in W3 Kitchen Sink template


Luc

Recommended Posts

Hey guys,

I use the W3 css template Kitchen Sink (https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_black&stacked=h) for my mobile website.

Many of my pages have a lot of content in the body so there the footer is at the bottom of the page, however on a few pages there is few content so my footer is somewhere in the middle of my screen. How can I make sure that the footer is always at the bottom, also with few content? I looked around and found some possible solutions however since the complexity of the css file I dont know where to change.

Your help is greatly appreciated!

 

 

 

 

Link to comment
Share on other sites

You have to set height of html and body to 100%, create wrapper div to surround everything except the footer, with footer placed after closing tag of wrapper div.

You then set min-height of wrapper div to 100% minus height of footer.

body, html {height: 100%;}

#wrapper {min-height: calc(100% - 185px); /*185px = height of footer (may need adjusting)*/}

Link to comment
Share on other sites

Thanks! This works fine, however a small white space remains under the footer.  I defined this in the file itself, not in css file since thats very difficult (lots of css from w3 schools)]

<style>
body, html {height: 100%;}

#wrapper {min-height: calc(100% - 200px);
 footer {
 height:200px;
 }
</style>

you might have an idea for this small white space under footer?

http://prnt.sc/et5qpk --> see here how it currently looks (this is pc screen, on mobile screen its the same however whitespace is bit smaller but I guess thats because of the difference in screen size?)

Thanks again!

 

 

Link to comment
Share on other sites

If this is not a typo then you have not closed the #wrapper declaration properly, you could tell that the image did not show a 200px high footer so something was preventing it applying the height property.

<style>
body, html {height: 100%;}

#wrapper {min-height: calc(100% - 200px);}

Also because footer is used many times within content in Kitchen Sink theme, I suggest you target the sticky footer specifically with

 #wrapper + footer {
 height:200px;
 }
</style>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...