Question

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 accomplish 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)

Answer 1

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