Full height sidebar

[FardeemMunir]

Hey guys,
I want a full height sidebar floated to the left of a page. It should be height 100% all the time so no matter where I am on the page the sidebar is there. (Yeoman.io) http://yeoman.io does the height thingy with javascript but I was looking for a css only solution. Also the WordPress admin does it but there is a lot of code and I can figure out anything.

[Paulie_D]

It depends on your structure by this works: http://codepen.io/Paulie-D/pen/mLerk

[DustinWoods]

The CSS property you’re looking for is position: fixed

[Paulie_D]

>The CSS property you’re looking for is position: fixed

No…I don’t think it is unless the sidebar is not supposed to scroll with the rest of the page.

Anyway, position:fixed does nothing to set height.

[FardeemMunir]

Well, if I add a ton of new stuff in the main area then 2 things happen
– The sidebar doesn’t expand in height to take up the whole area.
– Even the main area doesn’t contain all the text.

(http://codepen.io/FardeemMunir/pen/txwid)[http://codepen.io/FardeemMunir/pen/txwid]

@DustinWoods No, I don’t want the sidebar to be fixed.

[Paulie_D]

Weird…that should work…I’ll have another think.

@joshuanhibbert Yeah..but aren’t there other issues with ‘table’ styles?

Width issues & alignments etc.? My memory is a little fuzzy this morning.

[wolfcry911]

I agree with joshua, display: table-cell is a great way to accomplish this.

Here is another, older but still viable, option:
http://codepen.io/wolfcry911/pen/bJCfl

[Paulie_D]

Damn….that what I was trying to remember! :)

[PicnicTutorials]

I needed my main to be minimum as high as my sidebar. I did something real easy. #main:after {top:0;bottom:0;}. And gave it the container styling. Worked perfect.

[Paulie_D]

Ugh…..

[PicnicTutorials]

@Paulie_D

The main container here http://www.websitecodetutorials.com/ if you care to see what I mean.

[Rai]

Mmm not sure about this answer, weird to use table options to solve this. I´m looking for other solution.

[dgriesel]

Flexbox would be an option, although it is not very well supported.

[Author]

Posts