CODEWITHSUNDEEP
csssidebarsticky-footer
Tom Perkins
Tom Perkins

Reputation: 499

Getting a sidebar to appear 100% height when using faux columns and a sticky footer

I'm using a two column layout with a sticky footer.

I'm trying to make the sidebar use 100% height, even when there's not much content on the page.

I've used two techniques to do this. The first is a CSS sticky footer (http://www.cssstickyfooter.com/) and the second is faux columns (http://www.alistapart.com/articles/fauxcolumns/).

Faux columns is working well to keep two columns equal height, and to expand either one as required.

My challenge is that if you look at this example (http://visuals.customstudio.co.uk/atc/sidebar/) you'll see that the sidebar is not extending to the full height of the page.

I've tried another technique as detailed here (http://stackoverflow.com/a/6838338/557002), which you can see here (http://visuals.customstudio.co.uk/atc/sidebar/about.html) but this means that if the sidebar has more content that the main area, it's not seen.

Any ideas of how I can make both columns increase the page height as required, and extend all the way to the footer will be massively appreciated.

Thanks in advance,

Tom

Upvotes: 1

Views: 450

Answers (3)

Asif
Asif

Reputation: 5038

I think that the problem as with your about.html is with this css code:

.main-wide {
overflow: auto;
padding-bottom: 266px; /* footer height */
}

When you tried to extend your sidebar it is hidden by the overflow of .main-wide try with giving custom width to the sidebar and main-wide, for example:

.main-wide {
 width:75%; //or whatever you want in ratio or pixels
overflow: auto;
padding-bottom: 266px; /* footer height */
}

and 

.sidebar{ //any sidebar class
   width:25%;
   min-height:300px; //or as your wish
 }

P.S. : I am not a professional web developer, but have little knowledge. Hope it will help you.

Upvotes: 0

Stuart Burrows
Stuart Burrows

Reputation: 10814

I think I know what you mean - but the solution deviates from faux columns. I think you want to make the right column will always appear to fill the vertical height of the inner container.

To do this just use the background image on the <div id="outer" /> element. Like so:

#outer {
url(../images/faux-columns.png) repeat-y center top;
}

Hope that helps!

Upvotes: 1

DonJuwe
DonJuwe

Reputation: 4563

what about giving your .main-centre a min-height ? i don't know if i get you right but this looks good for me.

btw many of your paddings and margins are obsolete and could result into cross-browser problems.

Upvotes: 0

Related Questions