Sticky footer not totaly in the bottom on a mobile device

Question

Im currently building a website with a footer which should be sticked to the bottom, on my desktop (with chrome browser) it works fine, but when i'm trying the website on a mobile device, there is a little spacing underneath the footer, my question is how I can fix this? My website can be found at: http://block-smash.com/beta and my code is as follows:

<div id="wrapper">
<div id="header">
</div>
<div id="nav">
<center>
    <div class="circle">
    </div>
    <div class="circle">
    </div>
    <div class="circle">
    </div>
</center>
</div>
</div>
<div id="footer">
&copy; Mickael van Schie
</div>

and here my CSS:

html{
position: relative;
min-height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
body{
background: rgb(230,230,220);
overflow-x: hidden;
margin: 0px;
}
#wrapper{
height: 100%;
width: 100%;
}
#header{
width: 100%;
height: 50%;
background: rgb(100,200,100);
}
#nav{
height: 125px;
margin-left: auto;
margin-right: auto;
margin-top: -62px;
}
#footer{
width: 100%;
height: 15px;
background: rgb(100,200,100);
text-align: center;
padding: 5px;
font-family: arial;
color: rgb(230,230,220);
position: absolute;
bottom: 0px;
}
.circle{
height: 125px;
width: 125px;
border-radius: 90px;
background-color: white;
border: 5px solid rgb(70,130,70);
display: inline-block;
margin: 0px 40px 0px 40px;
position: relative;
}

I got some jquery in the website aswell, but that is not necessary for the footer or any height in the page.

I'd suggest you using [this approach](http://stackoverflow.com/questions/18469262/position-footer-at-bottom-of-page/18469622#18469622) instead of absolute positioning. — Hashem Qolami, Aug 11 '14 at 11:02

Sander Koedood · Accepted Answer · 2014-08-11T11:49:47.610

6

I've altered the code a little for you. I think that the problem is with the body not being the maximum height. Therefore, the footer might stick to the bottom of the body, which stops somewhere near those circles.

The code I changed is the following:

html {
    position: relative;
    min-height: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
}
body {
    background: rgb(230, 230, 220);
    overflow-x: hidden;
    margin: 0px;
    position: relative;
    min-height: 100%;
    height: auto;
}

As you can see, I gave html a solid height, and added a height and a min-height to the body, as well as a position relative.

The fiddle can be seen here.

edited Aug 11 '14 at 11:49

answered Aug 11 '14 at 11:01

Sander Koedood

6,007
6
25
34

This seems to be the solution! Thanks!, Ill mark your awnser as correct in 6 minutes – Azrael Aug 11 '14 at 11:05
Problem when you resize to the size of a little square and then you scroll down. See the screenshot : http://postimg.org/image/4qnwor1gn/ – singe3 Aug 11 '14 at 11:05
@singe31 it works fine for me on the real website, desktop and mobile, also on resizing. – Azrael Aug 11 '14 at 11:08
Then it must be JSFiddle fault – singe3 Aug 11 '14 at 11:10
I guess it is @singe31 ;) Thanks for your reaction though :) – Azrael Aug 11 '14 at 11:11
@singe31 That is true, but it has nothing to do with the question of the OP. Due to a set height on the `#nav` and the `#wrapper` div, the body doesn't size to the right size. I could solve it, if it would stop you from downvoting, but it was not the question of the OP, and not really relevant if you ask me, since the actual situation is different from the one in the fiddle. – Sander Koedood Aug 11 '14 at 11:39
If you had mentionned this problem in your message I wouldn't have downvoted. When you post an answer, you should be 100% certain that this is the perfect solution. – singe3 Aug 11 '14 at 11:45
@singe31 As the OP stated, it is the perfect solution. It works and he has no problems. However, if you think it is really necessary to solve problems that don't concern the OP, I shall change it for you. It does seem like a waste of time though. – Sander Koedood Aug 11 '14 at 11:48
@singe31 There you go, your problem should no longer occur. I've updated the fiddle to solve that problem you talked about. – Sander Koedood Aug 11 '14 at 11:57
Please excuse me for entering between your conversation sir, I just want to give my thought regarding this and please correct me if I'm wrong. I thought that the `body's y-scroll` cause that weird thing.'Coz when I set `body{overflow: hidden;}` it didn't happen. – AlexJaa Aug 11 '14 at 11:58
@Alexdn No problem at all. Though using `overflow: hidden;` solves the problem, it's not the cause. `#nav` has been given a solid height of `125px`. When the circles flow out of the `#nav` element because they are higher than `125px`, the body doesn't resize with it, because the containing div is still not higher. This causes the body to keep it's height of `125px` or `100%`, whichever is higher, and the footer sticking to the bottom of that. – Sander Koedood Aug 11 '14 at 12:00
1

@Alexdn Good to hear. I try my best to explain in an understandable way. – Sander Koedood Aug 11 '14 at 12:06
This worked event better then expected for me. Dont forget to set the meta with device-width, initial-scale – MadeInDreams Mar 21 '16 at 02:06

score 0 · Answer 2 · answered Aug 11 '14 at 11:06

0

Remove height property from your footer class.

#footer{
width: 100%;
/* height: 15px; */
background: rgb(100,200,100);
text-align: center;
padding: 5px;
font-family: arial;
color: rgb(230,230,220);
position: absolute;
bottom: 0px;
}

answered Aug 11 '14 at 11:06

Suresh Ponnukalai

13,820
5
34
54

It did the same for me when I had not added that yet, other sites said I had to add that in order for the `position: absolute` to work correct. – Azrael Aug 11 '14 at 11:09

Sticky footer not totaly in the bottom on a mobile device

2 Answers2