Set an element height via CSS or JavaScript/JQuery

This should be simple but nothing's working:

Question

How do you set the height of a webpage to be, lets say, exactly 4000 pixels—in such a way that scroll bars exist even when the page is blank?

Background

I'm new to JavaScript/JQuery but very experienced with similar technologies. I'm trying to do some fancy effects based on scrolling the page. To accomp开发者_StackOverflowlish this methodically, as a first step I'm looking to make a "really tall" page. From there I will hide/display items based on the scroll height with pseudo-code along the lines of:

function onScrollEvent() {
    var height = scroll height
    var sectionIndex = Math.floor(height / MAX_SECTION_HEIGHT);
    for each item in my array of graphics
         if item index != sectionIndex then item.fadeOut else item.fadeIn
}

Once I have that working, I'll start creating the effects I want to see. The problem is, I can't make the stupid page "really tall."

Summary

When I set the height style property of the main-content div, it doesn't seem to trigger scroll bars unless there's actual content on the page. How do I make the page "permanently tall," so to speak? That is, I want the page to behave (scroll) as though it has 4000 pixels of content even if there's only one line of text on the page. Right now it behaves as though there's a call to:

height = Math.min(height of contents, height of div style)

---

Have you tried min-height for body, or html tags? min-height requires the element to be at least that height regardless of the content contained.

CSS

html, body{
    min-height: 4000px;
}

Live Demo

Reference

---

Easy in CSS:

body
{
    height: 4000px;
}

Example here.

This is the simplest way. min-height is not supported by all browsers. This is a specific height that you can set to the body tag (essentially the webpage itself) to make it really tall.

---

In your CSS add:

body
{
    min-height: 4000px;
}

And you'll also need:

body
{
    height: 4000px;
}

for internet explorer (via IE's conditional comments).

---

In Chrome 10, on OSX 10.6 -- this renders a complete blank page with scroll on the Y axis, hope this is how you meant:

http://pastie.org/1674432