I solved my other javascript problems (don't know how) but the smooth scroll is working correctly now, and I made it so my #page is always the length of the logo. However i'd like to try and get my #content to always fill up the screen.
I just got it working using the original code. Weird thing was, I didn't change anything. For whatever reason either my computer or chrome was just going super slow, and now its working fine.
Yeah, I'm not sure whats going on. I think what is happening though is it renders as high as the browser is when you go to the site, but doesn't expand past that
The document height is not the same as window height. document, html and body all have the same height, or usually do.
So, if you only have a few lines in your document, then the document height will be less than the window height, which is equal to the browser window height.
If you have a bunch of stuff in your document, like say this page, then the document/html/body height will be greater than the window height.
Using that bit of code to try to achieve my 100% height to my #content. However, its not working... Any ideas?
http://people.ysu.edu/~jtpenezich/tfts/
I solved my other javascript problems (don't know how) but the smooth scroll is working correctly now, and I made it so my #page is always the length of the logo. However i'd like to try and get my #content to always fill up the screen.
So, if you only have a few lines in your document, then the document height will be less than the window height, which is equal to the browser window height.
If you have a bunch of stuff in your document, like say this page, then the document/html/body height will be greater than the window height.
html { height: 100%; }
body {height: 100%; }
#content {min-height: 100%; }
Thanks Sam!
That worked perfectly for me!
@Sam_Purcell, you should use
min-height: 100%;not height.