Setting The Height To The Height Of the Page Whilst Using A Sticky Footer.

[KKHAN]

Hi,

I am trying to set the height of the content to the height of the page, whilst using a sticky footer.

.content-main {

border-right:1px solid #cbcbcb;
        height: 100%;
min-height: 100%;
}

However, this is not taking effect (border does not show full height of page). Is there a hack or work around for this?

Condensed code. CodePen

[Paulie_D]

Does the .content-main div contain nothing but floated or positioned elements?

If so, it’s collapsing to zero height which is why the border isn’t showing up.

As a quick clearix (like overflow:hidden) and the border shows up and expands to the bottom of page if the content is long enough…click you ‘setting’ li to see.

[KKHAN]

Yes

overflow:hidden does bring the border. But can you see how the border is not 100% height of the page. Which is what i am after. Which you have mentioned depends on the height of the content.

However, i do not want it to depend on the height of the content, the min-height should always be 100%. So the border needs to go all the way down the page.

I’m just at a complete loss. Is this just a hard technique to implement? Am i doing it an awkward way? Is there a better way to implement the EXACT same layout/functionality?

[jurotek]

Please see this FORK if that’s what you after.

[KKHAN]

@jurotek

Can you see whats wrong with what uve changed and why it might not suit what i want?

1. The Footer is now in a contained width and not full width of the page.
2. The Heights are still not height of the page. Just have a look at the borders to work that out.

Sorry, this is not what i am after :(

[jurotek]

How about this THIS?

[KKHAN]

@jurotek

No, there is not much leeway i am willing to give. If exactly what i want can’t be done with my code i am willing to change, instead of trying to hack it. You’re second example still has border problems. I know this can be done ive seen it on other sites.

Im surprised no one has posted a solution yet, makes me wonder if this is just hard to implement?

[jurotek]

What problem with borders you referring to. They’re 100% of page height as you wanted and footer is now 100% width.

[Paulie_D]

Im surprised no one has posted a solution yet, makes me wonder if this is just hard to implement?

I’m not sensing a lot of gratitude for the work people are putting in to solve your design problem.

If you want quick solutions…hire someone.

[KKHAN]

@Paulie_D

Im not after a quick solution, i was surprised it is a bigger problem than i initially thought. I am thankful that i can go somewhere to get help. Just frustrated as i don’t think im explaining the problem properly from the solution e.g @jurotek is recommending me.

[Author]

Posts