Positioning of footer element

Question

I prepared a fiddle to show you my problem: https://jsfiddle.net/8a1qgodv/

The page-footer element is absolute positioned to the bottom with 0px. But if the height of the device is lower than 730px, the footer positions itself over the page-body element.

I tried it without position absolute, but then the page-footer does not stick to the bottom on a Galaxy S5 device. There is always a small white space between the footer and the bottom, like 20px or so.

Could you give me please some hints on how to solve this problem?

The HTML looks like this:

<div class="site-wrapper">
        <div class="container">
            <div class="page-header">
                <img class="img-responsive" src="http://www.smoshmosh.com/images/startseite_logo.png"/>
            </div>
            <div class="page-body indexPageBody">
                <img class="img-responsive" src="http://www.smoshmosh.com/images/startseite_content.png"/>
                <div class="startButton">
                    <a id="startButton" href="dummyUrl"><img id="startButtonImg" class="img-responsive" src="http://www.smoshmosh.com/images/start_button.gif"/></a>
                </div>
            </div>
            <div class="page-footer">
                <img class="img-responsive" id="startseiteFooter" src="http://www.smoshmosh.com/images/startseite_footer.png"/>
                <button id="audioToggleButton" class="startAudio"><img id="musicImage" class="img-responsive" src="http://www.smoshmosh.com/images/music_on.png"/></button>
            </div>
        </div>
    </div>

score 0 · Answer 1 · edited May 23 '17 at 12:09

0

Cool so this isn't too hard a problem to resolve.

An absolute positioned element is highly dependent on the positioning of it's closes parent element that has a non-static position.

You can resolve your problem by creating the following CSS rule

.site-wrapper {
    position:relative;
}

Here's a working fiddle for you

I would also suggest having a read through Mr Alien's answer on this SO Question. Specifically have a look at Demo 3 & 4.

It is a wonderful demonstration and explanation of absolute positioning.

EDIT:

Additionally, you will need to make space for the absolute positioned footer by creating padding at the bottom of the site-wrapper like this:

.site-wrapper {
    position:relative;
    padding-bottom: 230px;
}

Here's a working fiddle

edited May 23 '17 at 12:09

Community

1
1

answered Apr 15 '17 at 09:26

Frits

7,341
10
42
60

Mh, that didnt really change anything. When the site-wrapper is position: relative, the page-footer is always over the page-body. – krackmoe Apr 15 '17 at 10:37
I'm not sure I understand the problem then? It works in the fiddle - so are you saying that it does not work in your live implementation? – Frits Apr 15 '17 at 11:05
Mh i dont see it working in the fiddle. Have a look, it looks like that: http://666kb.com/i/die25q9djgr1kozvb.jpg – krackmoe Apr 15 '17 at 11:08
I am assuming then that you also don't want it hovering over the button at the bottom? You can then adjust the padding of the site-wrapper - see my edit :) – Frits Apr 15 '17 at 11:14
I really appreciate your help, but if i set 230px, it won't be responsive anymore, and it will just work on one device. Yeah it shouldnt hover over the button. There should be a space of i dont know, 20px between them all the time. On every device – krackmoe Apr 15 '17 at 11:19

score 0 · Answer 2 · answered Apr 15 '17 at 09:35

0

To Stick the footer to the bottom of page change CSS as follow

.page-footer {
    max-width: 500px;
    /*position: absolute;*/ // you were using absolute .. remove it 
    bottom: 0;
}

Give every 'div' a specific height then they ain't overflow each other

here's an example https://jsfiddle.net/8a1qgodv/2/

answered Apr 15 '17 at 09:35

Ashiqur Rahman

425
7
21

I can't give it a specifc height, i just want to define the width, so that it will be responsive. Thats the problem i think? – krackmoe Apr 15 '17 at 10:37
Your div content integration isn't done properly some content isn't in the div .. can you upload the design(photo) ... then it would be easy to show you the div alignment .. hope we can solve the problem – Ashiqur Rahman Apr 15 '17 at 11:25

score 0 · Answer 3 · answered Apr 15 '17 at 11:22

You can give it a responsive height.

.container {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

header {
  height: 10vh;
  background: #006dcc;
}

.content {
  height: 85vh;
}

footer {
  height: 5vh;
  background: #006dcc;
}

<div class=container>
  <header></header>
  <div class="content"></div>
  <footer></footer>
</div>

Positioning of footer element

3 Answers3