HTML Page Width and Height Settings | CSS Full Screen Size

super useful, this is what exactly I want

This is so helpful, keep going. you'r amazing!

Thanks boss. I have finally understood why that horizontal bar keeps appearing. Very helpful video 🔥🔥🔥🔥

what is the name program used when you are doing this

Professionally explained and yet easy to understand. Thank you

never thought i would have the big lebowski explaining css quirks to me, but here we are

OMG I'VE BEEN SEARCHING FOR AGES AND THIS GUY SOLVES MY PROBLEM IN JUST 17 MINS OF VIDEO WHAT A GUY! BRAVO MAN CHEERS!

I was struggling with the bottom scrollbar, you cleared my confusions

I've tried and noticed 1 point that when I added * { box-sizing : border-box; } , there is no horizonal scrollbar even though body { width : 100% } is not set. Maybe body { width : auto } by default solved that problem. So do I need to set width to 100% anymore?

The simple sometimes are the best way to do complex things. Amazing lessions, thank you very much.

Amazing, thank you

Had this overflow issue everytime i was styling a webpage. Scoured the internet for solutions and didn't find any. And stumbled upon this video. Thanks so much for doing this video Dave. Really helped me a lot.

Great quick and thorough explanation, Dave. Was having CSS overflow issues until I stumbled on this video. Crediting you and this channel in my documentation for my dynamic golf application site for a school project.

Exactly what I was searching for! Very good content, mate.
Helped me a lot. Congrats!

Thank you so much! This is super helpful!

Neither the old or new method actually work for me

Awesome explanation, Thanks!
I think with the upcoming CSS 'Dynamic viewport units' feature, we can simply do:
body{min-block-size: 100dvh;}, especially since '100vh' can cause some issues in mobile browsers.

I was facing some flickering of tooltips in my full screen react app and setting styles this way solved the issue. Thank you, love the way you explain things!

Thanks,
I was facing issue regarding multiple horizontal bars of the gradient I chose, It got resolved after setting the (min-height:100vh;) in the body in CSS.

Amazing.
I'm starting now and the hardest thing to me is about to display objects on CSS.
Even understanding about the tags, the parent and child, I'm still confused about how to display correctly the content.
But, you and all community are helping.

I absolutely loved your thorough and beginner friendly explanations. I'm currently learning web development and have to create a website based on figma design, and it's overwhelming, but therefore so interesting. Thanks for a chance to learn from the pro🤝
Can't wait to dive in your js and react content

Wow....Dave, this content is mind-blowing. Thanks to your insight on height and width settings, I have peace of mind now. 🤩🤩

Thanks for the detailed tut.

thank u Dave!

Why is it that when setting vph, in the various ways you have, it still is quite sensitive between similar screens, if I set something right, so the page fits perfectly with a desktop screen, then if I move it over to the laptop I get a scrollbar and what should be a single page is cut off (not a huge amount, just enough to annoy the hell out of me) ... I'm talking about something that should easily adjust between the screens.. (medium sized image and title) ...It's done my head in. ... or is this what I should expect, should I do media queries for all brands and then for all sizes ... if that is the case I think I'll smash my computer and go and sit on a beach somewhere...

You nailed it. You actually explained it. Fantastic video. Thank you so much,

Awesome. Practical fundamentals and great presentation. Very helpful. Thank you.

wow 😀😀 you are the best , love you bro !

thanks a lot I have been several days struggles because i can't understand the usage of the min-height
you give details no one teach it
thanks a lot .

thank u very much!!! 🥰

It is year 2022 and this worked for me thank you so much

Excellent work Dave

Honestly was looking for this!

Thank you so much !!!

Very Helpful

Fixed header and footer create issue in mobile devices while body{ min-height : 100vh; } defined.
Solution:
html{ height: -webkit-fill-available; }
body{ height : -webkit-fill-available; }

"In the past 100vh had problems in mobile browsers but it seems like they have that worked out". Nope, the problems still exist sadly

Great video thanks alot

sir, i love you

This is just perfect. Thank you (:

Thank you so much for the clear explanation! I've always been confused about why the content exceeds body and why width: 100vw generates that horizontal scrollbar. So glad that I found your video!

Really??!!...I've spent dozens of hours on tutorials trying to get these topics straight, and this guy nails it in 15min. The works 👏👏👏

This is so helpful!

I started working on a project and after i've set everything like you did, and got rid of the red border, the vertical scroll bar appeared again.. why is this happening ?

Hey Dave, one thing I have to say, "You are the best". I am going to watch all your old videos followed by future videos.

Thank you so much, I'm currently learning HTML and CSS and this cleared up the confusion about why my height didn't act the way I wanted it to

Could you take the html properties like font-family or font-size and put them in the universal selector instead of the html selector?

Do you have to set width:100% for the body or could you just leave it and only set the minheight