I would like to get my first DIV to be 100% width and height

Design help General
1

I like how this designer has his initial div at 100% width and height.
https://preview.webflow.com/preview/rvkrishna?preview=279c7cc5c54c3db3cd5fce78273cbe2c

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. :frowning:

Thanks for any advice! I’m using Chrome on the Mac…latest.

Here is my public share link: https://preview.webflow.com/preview/chrisjacobs?preview=a968b3ba598bae95194310cbc44ab591

2

Hi, I’ve not had a chance to look at the preview link you gave, but have you tried setting the div height and width value to, “100vw” and “100vh”?

3

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.

4

Just got into the Preview link:

Have a look at the below, is this what you wanted?

1921×949 807 KB

I set the “selfie” to “100vw” and “100vh”

2 Likes
5

@cjacobs627 - Have you tried that :point_up: suggestion ?

6

Can it be that easy? LOL! Seems to work… very interesting.

7

But can it work for video?

8

yup. any element :slight_smile: try it out

9

The vh and vw units stands for:

  • vw —> viewport width
  • vh —> viewport height

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.

1 Like
10

Hi @bart can I ask why would you avoid 100vw? What’s the benefit? Not questioning just eager to learn :slight_smile:

Cheers

11

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.

12

This solution worked perfectly! Thank you.

1 Like
13

@bart, that’s a really good explanation.

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.

1 Like
14

http://bartoszs-amazing-site.webflow.io/

Maybe that will explain things a little further :)

15

Once again, Webflow’s staff goes above and beyond. Thanks @bart for the resource. Great visualization!

2 Likes
16

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.