sticky-footer

I'm trying to achieve more or less the same of what is described in this question: Align an element to bottom with flexbox except for the fact that i can't use fixed heights. I have set of two cards that are already in a flex context (their heights are stretched with flexbox): Inside the card I have a series of elements: a header a body a footer (the blue div) What I want is the footer to always stick to the bottom. The inner container of the three elements described above have the following CSS: .card-inner { display:flex; flex-flow :row wrap; align-items: stretch; } and the items inside have

I'm trying to create a sticky footer for a responsive website. I've search the internet and have found various solutions but my problem is that due to the amount of text in my footer, the height of the footer changes are word-wrap occurs. I've tried using the method on Ryan Fait's site ( http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ ) but since you can't account for the height of the footer being a static value, it's hard to set the push value for the CSS. Currently I just have the footer fixed to the bottom, but that's causing a problem because as the footer increases in

So basicly i want to stick footer on the bottom of my page But the content of my page is dynamic, so in some cases the content is long, in some cases it is short I've searched through google and found many results, but when i try it, they work when the content is short, but if the content is long it will stick on the bottom of the window (not page) and overlap the content It's not matter if it uses javascript, but if you have the pure CSS ones it will be better GrayB This doesn't use a fixed position so it won't always show up at the bottom of your viewport. CSS from here You can also see a