So, I'm trying to work something out. I'm trying to make it so my sidebar's height is 100%, in that it extends all the way to bottom of the page. Now, I've set html and body to height: 100%; so you'd think it would work, but it doesn't.
Note: It extends to whatever size I drag the browser out, but when I scroll down the sidebar cuts off. It's only ever as big as the browser, but not the page.
Just keep in mind that using position: absolute; is an awkward hack that removes the sidebar from the natural flow of the document. You might notice this if the sidebar is ever taller than the content; the layout won't adjust to accommodate, instead chopping of the sidebar where the content finishes.
So, I'm trying to work something out. I'm trying to make it so my sidebar's height is 100%, in that it extends all the way to bottom of the page. Now, I've set html and body to height: 100%; so you'd think it would work, but it doesn't.
I've set up a pen here: http://codepen.io/anon/pen/jJoid
Note: It extends to whatever size I drag the browser out, but when I scroll down the sidebar cuts off. It's only ever as big as the browser, but not the page.
not sure if I understand what you want. You want side bar to always be the height of the article content height? http://codepen.io/anon/pen/Kaysi
@jurotek Perfecto! I owe you a beer! Thanks dude!!!
Just keep in mind that using
position: absolute;is an awkward hack that removes the sidebar from the natural flow of the document. You might notice this if the sidebar is ever taller than the content; the layout won't adjust to accommodate, instead chopping of the sidebar where the content finishes.@josh, that is true, @realph; you should look up better solution by Googling equal height column layouts