• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.2 Make Sidebar Height 100%

Dynamic

Well-known member
#1
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
#2
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.
 

Forsaken

Well-known member
#6
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
#7
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
#8
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!