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.
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.
@Paulie_D Elements behave like tables, so therefore, they adopt box-sizing: border-box; behaviour. That's certainly not an issue though. Also, the vertical-align property deals with any vertical alignment problems.
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.
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.
It depends on your structure by this works: http://codepen.io/Paulie-D/pen/mLerk
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.
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.
The best way to handle this if you don't need IE7 support is to use the
display: table-cell;technique: http://codepen.io/joshnh/pen/30abf3d2b51db6a5281aac454ddc9fcdWeird...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.
@Paulie_D Elements behave like tables, so therefore, they adopt
box-sizing: border-box;behaviour. That's certainly not an issue though. Also, thevertical-alignproperty deals with any vertical alignment problems.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
Damn....that what I was trying to remember! :)
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.
Ugh.....
@Paulie_D
The main container here http://www.websitecodetutorials.com/ if you care to see what I mean.