CODEWITHSUNDEEP
javascriptjqueryhtmlcss
gMale
gMale

Reputation: 17905

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

Upvotes: 3

Views: 525

Answers (4)

Kyle
Kyle

Reputation: 67244

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.

Upvotes: 2

Loktar
Loktar

Reputation: 35319

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

Upvotes: 2

Jon-Paul Lussier
Jon-Paul Lussier

Reputation: 225

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

Upvotes: 0

Gareth
Gareth

Reputation: 5718

In your CSS add:

body
{
    min-height: 4000px;
}

And you'll also need:

body
{
    height: 4000px;
}

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

Upvotes: 0

Related Questions