Sticky footer

  • Hi,
    I want to have a sticky footer so that it always styas at the bottom, even where there is little content. I want this to apply to mobile view also, but when I use

    html, body {
height: 100%;
}
html body.wide #wrapper.container {
min-height: 100%;
position: relative;
padding-bottom: 43px !important;/*height of footer*/
}
#containerfooter {
position: absolute;
bottom: 0;
}

    part of the content is cut off by the footer, and if I use @media I will not have the desired effect…so do you know of a way to make this work? I read about using something like

    html,
body { height: 100%; }

body {
  display: table;
  width: 100%;
}

.page-row {
  display: table-row;
  height: 1px;
}

.page-row-expanded { height: 100%; }

    but I don’t exactly know and understand this.

    Thanks,
    HugoN

Viewing 5 replies - 1 through 5 (of 5 total)
  • hannah

    (@hannahritner)

    Hey, can you post a link to your site?

    Hannah

    Thread Starter HugoN

    (@hugon)

    Hello hannah,
    the site is in construction mode and not visible to others. Do you know if I could make the second code work somehow? I just want the footer to stay at the bottom of the page and not float up, ideally without a huge white empty space above the footer(which would happen if I set a minimum height to the contentclass).

    hannah

    (@hannahritner)

    @media (min-width: 992px) {
html, body {
height: 100%;
}
html body.wide #wrapper.container {
min-height: 100%;
position: relative;
padding-bottom: 65px !important;
}
#containerfooter {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
}

    Try using that. You may need to adjust the padding size.

    Hannah

    Thread Starter HugoN

    (@hugon)

    Thank you, Hannah, but this is what I was referring to in my post: the footer still floats up on screens smaller than 992px width.

    If you can show your site once it’s off construction mode I think I could help with the css but I would need to see it to know exactly what css to give you.

    Kadence Themes

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Sticky footer’ is closed to new replies.