CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user8473431
user8473431

Reputation: 119

How do you get a div to take up the full screen until clicking a scrollTo function?

For example, in this guys' website (http://salleedesign.com/home/), no matter how much you enlarge your window, the div that includes his name and background img take up the entire screen until you either scroll down or click the 'read more' link, which has a scrollTo feature. Can anyone explain this to me?

Upvotes: 0

Views: 143

Answers (1)

fwr nr
fwr nr

Reputation: 697

You can achieve this effect by utilizing the VW (Viewport Width) and VH (Viewport Height) CSS3 units in the div element's style properties.

Example: 

#landing-box {
     width: 100vw;
     height: 100vh;
}

1VW unit is equal to 1% of the viewport's width. Likewise 1VH unit is equal to 1% of the viewport's height. So if you set a div's width property as 100vw and its height property as 100vh then it will always be 100% width and height of the viewport.

A common misconception is to just use the width and height properties with percentage values but these will be relative to another element's height/width and not the height of the viewport.

The element on the site you have linked begins at the top and is not fixed, that is what gives you the illusion that it is based on some sort of scroll function. Immediately after you scroll you reach another element because the first one was sized perfectly to your viewport.

This also makes it incredibly easy if you want to implement the scroll button that is used on that site as you know your div is always going to be 100vh in height, thus that is the amount you will have to scroll down programmatically with JavaScript.

Upvotes: 5

Related Questions