Jump to content

How to create a sticky footer in W3 Kitchen Sink template


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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...