CODEWITHSUNDEEP
javascripthtmlcssfrontend
JG Trindade
JG Trindade

Reputation: 165

What technique is used to create a div limited by the page fold?

Skipping the discussion about the importance of the fold in web design, I'd like to know which technique is used to limit a specific section (could be a div, for example) exactly on the browser fold considering a responsive design. Some websites even use both the mouse scroll and the a button to slide to the section below.

Ex.: Next

My point is not the slide itself, but how each section renders exactly on the fold regardless of the monitor resolution.

Upvotes: 1

Views: 129

Answers (3)

zgood
zgood

Reputation: 12571

You might try using the css unit of measurement vh. Say you have a div that you only want to take up half the screen (viewport) you would do something like this:

div{
    height: 50vh;
}

vh stands for "Viewport Height" and is used like a percentage. So to have the div always take up 100% of the view-able area (viewport), regardless of the screen size or resolution you would do this: div { height: 100vh; }

Upvotes: 1

Alex W
Alex W

Reputation: 38173

I would use document.documentElement.clientHeight and document.documentElement.clientWidth which are essentially the width and height of the html element:

$('div').css({'height':document.documentElement.clientHeight+'px',
              'width':document.documentElement.clientWidth+'px'});

http://jsfiddle.net/L1wsLc2c/1/

You would have to re-execute this code every time the window is resized to keep the bottom of the box flush with the page fold.

Upvotes: 0

Trufa
Trufa

Reputation: 40717

With:

window.innerHeight

You can know the height of the browser window and style your elements accordingly.

I am assuming that by fold you mean what you see without scrolling.

If you need a more backwards compatible (<I.E9) height and you can use jquery:

$( window ).height();

Upvotes: 1

Related Questions