html - Full viewport element -
i'm trying come how fullscreen intro element cover 100 of viewport in size of browser window? , when start scrolling, can see rest of homepage. please have @ example link below.
they using movie, i'm interested in simple div , use background image cover screen. have tried analyze webpage, , guess not using background poperties, instead div different layers? interesting learn how done.
i made simple test, , filled lot of dummy text(i removed text before pasted code here), seems intre div stays fullscreen , can't scroll rest of page.
<!doctype html> <html> <head> <style> #intro { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: red; } </style> </head> <body> <div id="intro">intro</div> <div class="container">page content</div> </body> </html>
you need use viewport percentage lengths, vw , vh
viewport-percentage lengths defined length relatively size of viewport, visible portion of document. gecko-based browsers updating viewport values dynamically, when size of viewport modified (by modifying size of window on desktop computer or turning device on phone or tablet).
body { margin: 0; } div { height: 100vh; width: 100vw; max-width:100%; /* prevent horizontal scrollbars */ background: blue; } div:nth-child(odd) { background: yellow; }<div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>
Comments
Post a Comment