Make a fullscreen section that's full height of browser window

You can create a fullscreen hero section, or in general make any element span the full height of the browser window.

To do this, simply set a height of 100vh on the element.

You can also set a width of 100vw. This will make the element span the full width of the browser window instead.

Note that you don’t want to use 100% for either of these, as that will make the element span the full width of the parent element.

Another word of warning about 100vw—this doesn’t account for the width of the scrollbar! Meaning that if you have any scrolling on your page, simply introducing a 100vw element will protrude past the width within the visible window (to the full width of the outer browser window), and thus introduce horizontal scrolling! (Note also that Plasmic disables horizontal scrolling by default on the outermost body of a page.)

Have feedback on this page? Let us know on our forum.