Geek asks and answers

Setting Element Height Using CSS or JavaScript / JQuery

This should be simple but nothing working:

Question

How do you set the height of a webpage, say exactly 4000 pixels, so that scrollbars exist even when the page is blank?

Background

I am new to JavaScript / JQuery, but very experienced with similar technologies. I am trying to make some fancy scroll based page effects. To do this methodically, as a first step, I am looking to create a “really tall” page. From there I will hide / show the elements based on the scroll height with pseudo-code line by line:

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
}

As soon as I succeed, I will begin to create the effects that I want to see. The problem is that I cannot make the dumb page "very high".

Summary

height div , , , , . " ", ? , , (), 4000 , . , :
 height = Math.min(height of contents, height of div style)

+3
4

min-height body html? min-height , , , .

CSS

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

Live Demo

+2

CSS:

body
{
    height: 4000px;
}

.

. min-height . , ( , -), .

+2

In CSS add:

body
{
    min-height: 4000px;
}

And you will also need:

body
{
    height: 4000px;
}

for Internet Explorer (via IE conditional comments).

0
source

In Chrome 10, on OSX 10.6 - this makes a complete blank page with a scroll along the Y axis, I hope that you had this in mind:

http://pastie.org/1674432

0
source

More articles:


All Articles