HTML Page Width and Height Settings | CSS Full Screen Size

Learn how to set HTML page width and height settings in CSS to achieve a full screen size. Setting CSS Height and Width properties can be confusing when working with the html and body elements. This quick tutorial explains root elements, how the html and body element interact, and when to use viewport units as well as when to avoid them.

⭐ Become a full-stack web dev with Zero To Mastery Courses:

HTML Page Width and Height Settings | CSS Full Screen Size

(00:00) Intro
(00:35) Initial set up and CSS values
(01:50) Viewing Computed Styles in Dev Tools
(02:26) The CSS Reset
(03:40) The root element of your webpage
(04:00) The body element
(04:35) Starting with percentages
(06:15) The root pseudo-selector
(07:15) What is the best solution for a full page height?
(08:25) The problem with 100% height on html and body
(09:20) The solution that has worked for years
(10:53) A more recent solution for full page height
(12:17) What about html page width?
(12:44) Setting html page width with percentages
(13:19) Why you may get a horizontal scroll bar and how to prevent it
(15:33) What styles should be set on the html element?

💻 Learn Web Dev at these sites:

✅ Follow Me:

Was this tutorial about how to set the HTML page width and height with CSS helpful? If so, please share. Let me know your thoughts in the comments.

#html #width #height

[DaveGrayTeachesCode]

Do you have a method you prefer to use to set your HTML page height and width? Share below!

[nwweulp]

I’m just learning CSS and this is so helpful. It’s great that you touch subjects that normal courses don’t handle. All the tutorials explain only the box model, posintioning, etc. But contents like this takes time to notice and search and solve on my own. Thanks a lot. I’d love more CSS content like this!

[ManontheBroadcast]

I can hardly find such great tutorials getting in this level of detail and with a beginner friendly explanation....
Thanks for sharing, thanks for teaching...

[ahmedabdelaalweb]

Fantastic info. I'm surprised by how many CSS tutorials skip over this. Thank you very much!

[aleksandraryan]

I always enjoy new information and tutorials about HTML&CSS. Well explained as well 🙏

[pankajniroula]

This was very thorough and helpful. Something I'd always miss while I worked on similar situations. Thank you for sharing!

[silasowu]

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

[marlonrtt]

This video solved a lot of confusions in my mind...

[ernesto]

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

[salvador]

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!

[hgjghjkhify]

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.

[gustavoferreira]

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

[j_u_d_y]

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!

[David_Liu]

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

[RojoCuerpo]

Sir you have saved my afternoon! I was going nuts not understanding why i wasn't able to position my elements around my page, and then I went nuts figuring out how to give the body the size of the view port. AND THEN you just casually explained it as if it wasn't a big deal, because it wasn't!! You really made it super easy to understand. Thank you so much!!

[mocococo]

Professionally explained and yet easy to understand. Thank you

[nihalmurali]

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.

[BTjacker]

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!

[samfabio]

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

[MeinDeutschkurs]

Thank you so much for playing around. It was exactly what I was looking for! 🙌