Code jQuery Web

Dec 2, 2009

John Chapman

7 Comments

Using Simple jQuery to Set the Height of a DIV to the Page Height

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:

height: 100%;

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:

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
     $(document).ready(function() {
           $("#name_of_element").height($(document).height());
     });
</script>

This very simple code has made it simple to ensure an element, such as a DIV, gets assigned the height of the full page.

Related content:

1. SharePoint 2007 – JQuery to Fix Ugly Page Titles
2. ASP.NET Proxy Page – Used for Cross Domain Requests from AJAX and JavaScript
3. [jQuery] Return User to Referring URL – Exit Link/Button
4. FIXED – 64-bit Adobe PDF Previewer in Outlook 2007/2010 and Windows Explorer
5. [SharePoint 2010] Solution to Load jQuery on All Pages

John Chapman

Hello, I'm John Chapman. I am a SharePoint developer living in Mesa, Arizona. I develop solutions using ASP.NET, C#, jQuery, SQL, SharePoint, etc, and I thrive on the challenge of writing code to overcome the impossible, annoying, or otherwise difficult obstacles.

Website - Twitter - More Posts

7 Comments

• 
  Raju August 16, 2010 at 6:51 am

  Thanks buddy for this code.
  Saving lots of time

  God bless

  Reply
• 
  Duane Charles January 4, 2011 at 10:17 pm

  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…

  Reply
• 
  seb May 5, 2011 at 11:16 am

  Great, thanks, I was getting a headache trying to do this with css

  Reply
• 
  Lee Tempest September 8, 2011 at 1:32 pm

  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());

  Reply
  • 
    John Chapman September 8, 2011 at 2:35 pm

    $(“#name_of_element”).height($(document).height() – 256);

    Reply
• 
  Bach Nhat Hoa November 9, 2011 at 2:24 am

  Nice Job.

  Reply
• 
  Greg February 2, 2012 at 7:44 pm

  Thank you, Thank you, Thank you! Just spent an hour trying to fix css! This technique fixed it in 10 seconds.

  Reply