Set an element height via CSS or JavaScript/JQuery

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)

Loktar · Accepted Answer · 2011-03-15 14:03:10Z

2

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

edited Mar 15, 2011 at 14:03

answered Mar 15, 2011 at 13:56

Loktar

35.3k7 gold badges96 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Kyle Over a year ago

Set the height to the HTML? This is logical but doesn't work. It should be set on the body tag.

Loktar Over a year ago

@Kyle Sevenoaks works for me, check out the fiddle and remove body.

Kyle Over a year ago

It might work for some things, but check related: stackoverflow.com/questions/4122727/…

gMale Over a year ago

@Loktar: This didn't work at all but... after seeing your link to the live demo, I figured this MUST work, so I stripped everything down to the most basic example possible. And then it worked, perfectly! So there must be something wrong with the style sheet I'm using. Thanks for your help, now I'll try to debug the other problem... maybe it has something to do with with this style "reset" stuff at the top of the stylesheet...

Loktar Over a year ago

@gmale I hope you figure it out

Kyle · Accepted Answer · 2011-03-15 14:09:38Z

2

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.

edited Mar 15, 2011 at 14:09

answered Mar 15, 2011 at 13:55

Kyle

67.5k28 gold badges148 silver badges153 bronze badges

Comments

Gareth · Accepted Answer · 2011-03-15 13:56:59Z

0

In your CSS add:

body
{
    min-height: 4000px;
}

And you'll also need:

body
{
    height: 4000px;
}

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

answered Mar 15, 2011 at 13:56

Gareth

5,7283 gold badges30 silver badges40 bronze badges

Comments

Jon-Paul Lussier · Accepted Answer · 2011-03-15 14:03:05Z

0

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

answered Mar 15, 2011 at 14:03

Jon-Paul Lussier

2251 silver badge7 bronze badges

Collectives™ on Stack Overflow

Set an element height via CSS or JavaScript/JQuery

Question

Background

Summary

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Question

Background

Summary

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related