XF 1.2 Make Sidebar Height 100%

[Dynamic]

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

height: 100%;

and

height: 100% !important;

none of these worked.

Thanks.

 

[Forsaken]

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

height: 100%;

and

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]

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]

Ugh, what the hell? I'm confused, why would they make it like that for?

It's actually an issue with CSS, and every work around that you could use for XenForo is either janky or just a pain in the ass to deal with.

 

[Dynamic]

It's actually an issue with CSS, and every work around that you could use for XenForo is either janky or just a pain in the ass to deal with.

Ah fair enough man. Thanks for the replies anyway

 

[Forsaken]

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.

.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 ).

 

[Shelley]

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]

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

.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 ).

Great idea. I will give it a shot. Thanks dude!