-1

I was trying to make sticky footer for my website, i have used javascript to create element in this case for specific reason, i created <footer> element and tried to get it fully at bottom at every resolution of width.

I want to append footer at body only, so this is my javascript:

$(function () {
    $('.products').each(function(i, obj) {
        if (i > 0) {
           obj.id = "p" + i
           var pl = document.createElement("footer");
           var t = document.createTextNode(i);
           pl.className = "pageblock"
           pl.appendChild(t);
           document.body.appendChild(pl);
        }
    });
});

This creates footer, in this case single footer only, and editing style of .pageblock class works.

To bring footer fully down, i have tried this:

.pageblock {
    clear: both;
    position: relative;
    text-align: center;
    bottom: 0;
    z-index: 10;
    font-family: 'Lato';
    font-size: 3em;
    color: white;
    font-weight: bold;
}

but for some reason, it still wouldn't work, it would be stuck in somewhere nearby vertical center. Check for "1" here.

I have flex layout on website, so elements horizontally scale with browsers with and increase vertical size.

Is there any way i can fully move element to the bottom so it's always there, even when vertical size get's bigger or smaller? Is there any way i can do this without wrapping everything up in single div which may damage the code itself?

Thanks!

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
ShellRox
  • 2,532
  • 6
  • 42
  • 90
  • Relative positioning only moves an element in regard to the position it would have in normal flow. And since you only set `bottom:0`, you are not even moving it from that position at all. How do you think that would accomplish what you want? – CBroe Feb 23 '17 at 15:28
  • +CBroe i'm not trying to fix it with scroll, i want it to stay completely in bottom. – ShellRox Feb 23 '17 at 15:32
  • One simply way to achieve this using flexbox: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ (You might need to add an additional container element around the rest of the content, but that should be possible without breaking everything.) – CBroe Feb 23 '17 at 15:38
  • @CBroe Thanks for solution, should i create seperate flexbox element for footer or should it with existing one i have? – ShellRox Feb 23 '17 at 15:40
  • It might be hard to implement this in your current layout, because you have stuff like the searchbox absolute positioned (for no apparent reason?), and that takes it out of the flow, so that those elements do not influence the height of their parent element any more. – CBroe Feb 23 '17 at 15:48
  • @CBroe so there is no known way of fully positioning element in the bottom at this point? i think i'l create another flex layout for footer. – ShellRox Feb 23 '17 at 15:51

1 Answers1

1

It's quite difficult to tell exactly what you need without your flex setup and the html, but on a hunch, you probably need

html, body {
    min-height: 100%;
}

if your application allows. Your flex elements are stretching vertically to the height of the body, which is the height of the content, therefore your footer is already at the bottom. By setting the minimum height to 100% you set html and body to the window height, thus stretching the elements properly and throwing your footer to the bottom.

Vinny Fonseca
  • 450
  • 3
  • 10