XF 1.2 Make Sidebar Height 100%

Dynamic

Well-known member
Hey guys,

Just wondering how to make the sidebar height 100%? I tried adding the code to the sidebar properties but it did not work.

I tried
Code:
height: 100%;
and
Code:
height: 100% !important;
none of these worked.

Thanks.
 

Forsaken

Well-known member
Hey guys,

Just wondering how to make the sidebar height 100%? I tried adding the code to the sidebar properties but it did not work.

I tried
Code:
height: 100%;
and
Code:
height: 100% !important;
none of these worked.

Thanks.
100% height doesn't work, and any alternative solution has been a pain in the ass and requires a lot of tweaking and becomes a hassle to support.
 

Dynamic

Well-known member
100% height doesn't work, and any alternative solution has been a pain in the ass and requires a lot of tweaking and becomes a hassle to support.
Ugh, what the hell? I'm confused, why would they make it like that for?
 

Forsaken

Well-known member
Ah fair enough man. Thanks for the replies anyway :)
One thing you could do is use a background for the content #content .pageContent and change it out when there isn't a sidebar.

Code:
.Sidebar #content .pageContent { background: url('background1.png'); }
.NoSidebar #content .pageContente { background: url('background2.png'); }
Still, isn't exactly pretty, and there are times when it can be problematic but it's less of a pain then using an equalHeight plugin which doesn't work with responsive design all that much (I had it included in the framework, but it was either building our own take and test hundreds of use cases, or remove it. I chose the later (y)).
 

Shelley

Well-known member
I'll concur this is a PIA to support I tried the same (managed it) on my christmas style (inspired by forsaken) and it can be a nightmare to get right.
 

Dynamic

Well-known member
One thing you could do is use a background for the content #content .pageContent and change it out when there isn't a sidebar.

Code:
.Sidebar #content .pageContent { background: url('background1.png'); }
.NoSidebar #content .pageContente { background: url('background2.png'); }
Still, isn't exactly pretty, and there are times when it can be problematic but it's less of a pain then using an equalHeight plugin which doesn't work with responsive design all that much (I had it included in the framework, but it was either building our own take and test hundreds of use cases, or remove it. I chose the later (y)).
Great idea. I will give it a shot. Thanks dude!
 
Top