I would also like to do this, but I just can’t find the way. I’ve been told there’s Javascript involved, but then I’ve been told there’s no need for javascript! Just can’t find the right answer… I’ve duplicated the div class attributes shown on rvkrishna’s site (even down to the names - not that I need to)…but they produce non-results, nonetheless.
Thanks for any advice! I’m using Chrome on the Mac…latest.
You need the 100% width and height…did all that. Setting the height of the Body actually helps to make that all work… but the “cover” img inside the div (as a background) - resizes funny…not like on rvkrishna’s site. Krishna’s site had no attributes called out in the body tag.
Every 1vh or 1vw is 1% of the window’s size. So 100vh is 100% of the viewport (browser window’s) height.
I would avoid using vw for width to fill entire window lefto-to-right. Instead I suggest using 100% for width and then those famous 100vh for height to fill 100% of browser’s height.
The difference between using width: 100vw instead of width: 100% is that while 100% will make the element fit all the space available, the viewport width has a specific measure, in this case the width of the available screen, including the document margin.
So to recap, 100vw will make a div (or other element) as wide as the browser viewport. When it’s set to 100%, that will make the div as wide as the element it’s in.
In other words, a div set to 100% in a blank HTML body will take up the full browser width, as will 100vw. But if that same div is inside a centered container 960px wide, the same div (still set to 100%) will only be 960px wide (taking up the full width of the container). That same div set to 100vw will actually exceed the 960px width because it’ll take the full width of the browser viewport.
suggestion ?
try it out