Footer always displayed at bottom of screen

I add this code

#containerfooter {
position:fixed;
z-index:10000;
left:0px; right:0px; bottom:0px;
}

and this is the result

how do I get this?

CSS

<style type="text/css">
html,body{
height:100%;
}
#wrapper{
min-height:100%;
height:auto !important;
height:100%;
margin:0 auto -100px; /* negative height footer margin */
}
.pushfooter{
height:100px; /* heighta footer */
clear:both; /* clear float */
}
</style>

HTML

<div id="wrapper">
CONTENT
<div class="pushfooter"></div>
</div>
<div id="footer">
FOOTER ALWAYS BOTTOM
</div>

Please i don’t find the position where i can use the code:)

Thanks.

The link you posted doesn’t make sense. Anyway
I would try adding your top css with this:

.contentclass {padding-bottom:160px;}

You will likely have to play with that a bit, but I assume it would work.

Kadence Themes

I’m sorry, I was working on. Please watch now.

Your full screen slider is really messing with the layout. I’m not sure what you are trying to accomplish now. But you need to look into the issues with your full screen slider.

I love your theme but i just want add a fullscreen background in the pages ??

My problem is this IMAGE.

If I have a empty content the footer isn’t in bottom of page ??

You link doesn’t have the css from the top:

#containerfooter {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}

Works with it

I add the code, but the problem is not in homepage but in internal page

You didn’t add the class I gave you above.

.contentclass {padding-bottom:160px;}

Kadence Themes

Don’t work ??

I search a solution like this

CODE

Thank you very much for your patience!!!

Oh I see now,
Here is what you need:

html, body {padding:0; margin:0; height:100%;}
#wrapper {position: relative; min-height:100%;}
#containerfooter {position: absolute; bottom: 0; left: 0; right: 0;}
.contentclass {padding-bottom:160px;}

Kadence Themes

AWESOME!!!

Thanks!!!!

Hi there.

I am too trying to get my footer locked to the bottom of the window. I see the CSS you’ve recommended but I can’t, for the life of me, find where to add it.

Great theme but the CSS is hidden.

How do I do this?

Hey bettsy, Try adding this to your custom css box in appearance > theme options > advanced settings:

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

Hannah