Luc Posted April 6, 2017 Share Posted April 6, 2017 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 More sharing options...
dsonesuk Posted April 6, 2017 Share Posted April 6, 2017 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 More sharing options...
Luc Posted April 6, 2017 Author Share Posted April 6, 2017 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 More sharing options...
dsonesuk Posted April 6, 2017 Share Posted April 6, 2017 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 More sharing options...
Luc Posted April 6, 2017 Author Share Posted April 6, 2017 Thanks!!! It works perfect Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now