With CSS2 there is no easy way to set the height of an element to match the length of a page. Most people try to use:
[css]height: 100%;[/css]
This only sets the element to be the height of the browser window. As soon as you scroll down, your element does not keep going. In all my searching I have not found a single way to do this in CSS alone that works in all current browsers.
To solve this issue I have been using very simple jQuery to retrieve the height of the page and set the height of the element:
[js]
[/js]
This very simple code has made it simple to ensure an element, such as a DIV, gets assigned the height of the full page.
Thanks buddy for this code.
Saving lots of time
God bless
I tried all the other solutions with mixed results as well. I finally gave up and decided to use JavaScript. jQuery worked out for me again, thanks for posting this…
Great, thanks, I was getting a headache trying to do this with css :)
How do I reduce the style class that is applied to the element by a specified amount?
I need to reduce the height generated by 265 pixels, where would I add it to this code?
$(“#name_of_element”).height($(document).height());
$(¢#name_of_element¢).height($(document).height() – 256);
Nice Job.
Thank you, Thank you, Thank you! Just spent an hour trying to fix css! This technique fixed it in 10 seconds.
Thanks! I’ve been looking into all this again after a while, and I couldn’t believe the issue still isn’t solved – even with all the newfangled CSS3 magic. I had to change the top row to
jQuery(document).ready(function($) {
for it to work, though.
wow…. Dude, that is awesome. I spent hours searching on Google, and Bing on how to do this. Finally, it took me just a few second to solve my problem with your code. Thanks a millions my friend. I wish I had found your site earlier.
Great !!!
I have been messing around for some hours to fix it through css. This fixed it immediately.
Thans alot for sharing.
Work like a charm, thanks!