[Resolved] Fixed Layout With Scrollable Content And Sticky Footer

[KKHAN]

Hello,

I have a fixed layout i am trying to achieve, which resembles popular website layouts like Youtube.com/mail.live.com/Twitch.tv

I have managed to implement the majority of it, however i am having some problems with the scrollable content AND the sticky footer. I used this tutorial to implement my sticky footer.

I have added my code to jsFiddle. Can anyone help me solve my problem and any other advice to help me improve is welcome.

Problems:
1. The Scrollable content height is 100% which takes into account other tab information. Meaning the height is set to the height of the largest tab, which i don’t want it to. I just want the sticky footer at the bottom with fixed layout.
2. If you click on setting tab and scroll down, the sticky footer does not stick to the bottom.
3. (Optional, as ive not looked into this my self properly). If you click on the text of a tab it doesn’t change the background color when active. Only when you click next to the tab.

thanks

[Flan]

point2: one of your container elements has zero height, therefore the footer does not get pushed further down…

[KKHAN]

I don’t necessarily want the footer fixed, just for it to always be at the bottom.

take a look at this iteration.

http://jsfiddle.net/H45ub/6/

@Flan which container?

What i am trying to achieve is what youtube.com has. If you go to there page they have a fixed header, fixed left navigation but scrollable content. When you scroll to the bottom thats when the footer appears. < this is what i want.

[Paulie_D]

So a fixed position header, a fixed position sidebar and a sticky footer then.

Right?

[KKHAN]

Yes @Paulie D with scrollable content using the main scrollbar. I have implemented the sticky footer here doesent work well with rest of code tho

[Paulie_D]

The JSfiddle is a little too much code to play with.

Could you reduce it down to a simpler basic ‘building block’ level, ideally in a Codepen.io example (which is **much ** better than JSfiddle)?

Wait… I think I have something I was experimenting with saved somewhere…ah, yes.

http://codepen.io/Paulie-D/pen/oLexc

[KKHAN]

i will try to minimise the code in jsfiddle. The example you have shown me is what i am looking to get. Though does this take into account variable height of the main content? Also can u see how ur side menu text gets cut of when u scroll to the bottom.

So i have altered my code a little bit using ur methods, its in a better state i believe. However i am trying to get the border-right: 1px on the scrollable content, but it doesn’t show. I have added it to .content-main

http://codepen.io/anon/pen/eJtEC

[Paulie_D]

Your codepen did not take.

Also can u see how ur side menu text gets cut of when u scroll to the bottom.

Thats’s part and parcel of dealing with fixed positioning but someone might have a solution.

Of course, flexbox can do this with no hassle, I think..but you’d need a fallback for broswers that don’t support it.

[KKHAN]

@Paulie_D

CodePen

[Author]

Posts