- This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
Viewing 7 posts - 1 through 7 (of 7 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hi everyone, has anyone figured out how to get a div to be 100% of the current window height?
I read that it relies on the parent element having a height value but that doesn’t seem to work for me either.
if anyone has figured out a way around this i’d be grateful.
@tannercampbell, overflow: hidden makes the parent element expand around floated elements, but doesn’t necessarily make it’s height 100% of the window.
@mshort1985, here’s an example: http://jsfiddle.net/zyN58/
Not to highjack, but I was about to post the same thing. I just tried having the html and body and the container 100% height. It made my page wrap only go down so far and stop.
http://people.ysu.edu/~jtpenezich/tfts/
The end goal is to have my bar “content_home” be 100% of the window height, so when the large logo re sizes, so does the side bar.
@Jeager, the float on ‘content_home’ is causing it’s height to contract. If you take the float off it will expand to the full window height. It appears that you need the float though so I would just use JS to adjust the height of that div.
I’d add jQuery and use something like:
$(‘.content_home’).css(‘height’, $(window).height());
Here’s a cross-browser sticky footer that accomplishes a 100% height body without JS.
Hmm.. Before I had any floats I had the logo outside of the wrapper, and gave the ‘content_home’ a margin of 50%, but the problem is that after the logo hits its max width, the ‘content_home’ just starts floating off in space… If there is a way around that, I can avoid using js, however I am also not really opposed of it either.
Unfortunately that code does not work, or I am doing something wrong, which is probably the case considering I cant get smooth scrolling working correctly either. The sticky footer is kinda weird, because if I dont position it normally it gets shoved somewhere awkward. However adding it did not break it, so I’ll be using it.