HTML Page Width and Height Settings | CSS Full Screen Size

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
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.
💖 Support me on Patreon ➜ / davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- The Complete Web Developer: bit.ly/WebDevMaster
- The Complete Web Designer: bit.ly/CompWebDesign
- Junior to Senior Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ bit.ly/3nGHmNn
☕ Buy Me A Coffee: www.buymeacoffee.com/DaveGray
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:
www.freecodecamp.org
www.theodinproject.com
scrimba.com/
✅ Follow Me:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com/
Reddit: / daveoneleven
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]

If you're learning beginning web development, save my playlist for beginners with tutorials on HTML, CSS, JavaScript and more: kzbin.info/aero/PL0Zuz27SZ-6ML9kSOCIjGv-5xcRvi-qZP Do you have a method you prefer to use to set your HTML page height and width? Share below!

[@DaveGrayTeachesCode]

@Le Kaïd if I remember correctly, I showed a weather app. I have a tutorial on how to build it here: kzbin.info/www/bejne/qZCslpKvncRnedE

[@user-nw8we9ul5p]

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!

[@DaveGrayTeachesCode]

Thank you! I will continue to add more content for CSS and all aspects of web development. I appreciate you watching and subscribing :)

[@balkarangrewal3646]

Hey bro , what's your progress?

[@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...

[@DaveGrayTeachesCode]

Thank you for the kind words!

[@aleksandraryan]

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

[@DaveGrayTeachesCode]

Thank you!

[@ahmedabdelaalweb]

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

[@DaveGrayTeachesCode]

You're welcome!

[@pankajniroula4388]

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

[@DaveGrayTeachesCode]

You're welcome!

[@silasowu4502]

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

[@salvador8164]

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!

[@mocococo2877]

Professionally explained and yet easy to understand. Thank you

[@j_u_d_y3041]

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!

[@DaveGrayTeachesCode]

You're welcome! 💯

[@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.

[@DaveGrayTeachesCode]

Glad to hear it helped! And wishing you the best on your project! 🚀

[@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!!

[@DaveGrayTeachesCode]

Happy to help! 😃

[@gustavoferreira9802]

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

[@DaveGrayTeachesCode]

Glad to hear that!

[@David_Liu93]

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

[@DaveGrayTeachesCode]

Thank you!

[@marlonrtt]

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

[@DaveGrayTeachesCode]

Glad I could help!

[@MeinDeutschkurs]

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

[@DaveGrayTeachesCode]

You're welcome 💯

[@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!

[@DaveGrayTeachesCode]

Glad it helped!

[@samfabio]

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

[@ernesto790]

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

[@DaveGrayTeachesCode]

I'm glad I could help, Ernesto! 💯🚀

[@youtischia]

A great analysis of these two settings. Thanks.

[@DaveGrayTeachesCode]

Thank you

[@The-sound-of-silence]

You're brilliant. Thank you, you've got a new sub. ❤

[@nihalmurali7470]

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.

[@DaveGrayTeachesCode]

You're welcome!

[@lupebarriga8014]

Life saver, thank you so much for making this video. A course I'm taking lacked this simple yet most helpful explanation to understand width and height, blessings :))

[@DaveGrayTeachesCode]

Glad it was helpful! 💯

[@behold_a_son]

I've had this doubt from a long time! Thanks for solving it!

[@DaveGrayTeachesCode]

Happy to help! 💯

[@graciam3020]

This video was so helpful and incredibly well explained. Thank you, it's cleared up alot of my confusion!

[@DaveGrayTeachesCode]

Glad it was helpful! 🚀

[@jahykemoney4820]

same here. for a couple years (believe it or not) my main big problem/issue with developing my own website was on how to make sure that the site was 100% of the height of the screen size and how to make the body and html element grow when the child elements would increase in size. man. this has been a huge help!

[@DaveGrayTeachesCode]

@@jahykemoney4820 glad I could help! 🚀

[@andrewwarren654]

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

[@DaveGrayTeachesCode]

You're welcome, Andrew!

[@peachy19968]

You are great at explaining things! Thank you.

[@DaveGrayTeachesCode]

Glad it was helpful!

[@ocabreiro]

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

[@DaveGrayTeachesCode]

You're very welcome!

[@FaithSummersProduction]

Thank you so much! This is exactly what I needed :)

[@DaveGrayTeachesCode]

Glad it helped! 😃

[@sbmahapatra]

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.

[@DaveGrayTeachesCode]

Thank you so much for the kind words 🙏💯

[@aliemreozturanl4247]

This video is a must see if you are new to css. I had lots of problems until this video. Thank you so much!!!!!

[@DaveGrayTeachesCode]

You're welcome! 💯

[@louielee3583]

Great video Dave, thank you.

[@DaveGrayTeachesCode]

You're welcome, Louie! 💯

[@danielmadison4451]

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

[@DaveGrayTeachesCode]

Glad it was helpful!

[@storm-technologie]

you are the best, thank you so much, I was desperate with this problem , your explanations are clear and easy to understand

[@DaveGrayTeachesCode]

Glad I could help!

[@shariqshoaib3207]

Really great way of explanation, it really helped me. Thank you so much.

[@DaveGrayTeachesCode]

You're welcome! 🚀 Glad I could help.

[@princeudoka1177]

This is so helpful. Thanks Dave

[@DaveGrayTeachesCode]

You're welcome! 💯

[@yuli3873]

Thank you so much! This is super helpful!

[@DaveGrayTeachesCode]

Glad to hear that!

[@sharoonhayat4972]

thanks dave . this video is very helping i always get horizontal error and height but this video clears all thank you very much GOD Bless you

[@DaveGrayTeachesCode]

You're very welcome. Thank you for the note. 🙏💯

[@salehdesta5569]

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

[@gilblax8764]

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.

[@DaveGrayTeachesCode]

Glad I could help! 💯 My Web Dev Roadmap includes my complete CSS course with a chapter dedicated to display and is free: bit.ly/DaveGrayWebDevRoadmap

[@humairafasihahmed1754]

Honestly was looking for this!

[@DaveGrayTeachesCode]

Glad I could help!

[@khushimk1879]

One of the great video about height and width, thank you

[@DaveGrayTeachesCode]

You're welcome! 🙏💯

[@samvibes8544]

All the mistakes I have made till today got corrected , Thanks to you , keep it up Big Guy..

[@DaveGrayTeachesCode]

Happy to help! 🚀

[@sxmvp]

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

[@DaveGrayTeachesCode]

Glad to hear it helped! You can check out my HTML for Beginners playlist: kzbin.info/aero/PL0Zuz27SZ-6M1Uopt6_VL3gf3cpMnwavm and my CSS for Beginners playlist: kzbin.info/aero/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit with more lessons, too.

[@Enn99999]

super useful, this is what exactly I want

[@abheemk]

Loved the content, Thanks, Dave

[@DaveGrayTeachesCode]

Glad to hear it 🙏

[@arunsh6212]

very informative , thanks a lot.

[@DaveGrayTeachesCode]

You're welcome!

[@DreamTitanGames]

Excellent work Dave

[@DaveGrayTeachesCode]

Thank you!

[@PositiveZahid]

Wonderful tutorial, excellent explanation. Thanks

[@DaveGrayTeachesCode]

You're welcome! 💯

[@NamNguyen-oz8uj]

This is the best video about width, height in css. Thank you very much! 🎉🎉🙏🙏

[@DaveGrayTeachesCode]

You're welcome! 🙏

[@mohamedmahmoud-nj1uh]

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 .

[@DaveGrayTeachesCode]

Glad it helped!

[@MrMonishSoni]

This Video sums up my Manual Research of 4 Hours on the internet randomly. Wish i had come to this first :D Thanks For the video.

[@DaveGrayTeachesCode]

You're welcome!

[@havefun5519]

Thanks for the detailed tut.

[@DaveGrayTeachesCode]

Glad it was helpful!

[@ahmad-murery]

Nice tips Dave, I'm using 100vh for the body min-height but don't set the width property (I think body is block element which has 100% of the parent width), for the html I always add scroll-behavior: smooth Not sure if It's a good idea to put this video in a separate playlist dedicated for common design problems/fixes I enjoy fixing things or seeing someone do Thanks

[@DaveGrayTeachesCode]

Right on - yes, width has a default of auto. I set it mostly out of habit and showing my intention in the code. Thanks for the scroll-behavior suggestion! I will check that out :)

[@musa94]

Learned a lot from this video, thanks!

[@DaveGrayTeachesCode]

Glad to hear you did! 💯🚀

[@rawrsophiex]

thanks for this tutorial :) you have a lovely voice by the way!

[@DaveGrayTeachesCode]

Thank you, Sophia! 🙏

[@michaeltse4711]

Very Helpful

[@Knards]

I learned Sass about 5 years ago, and I love writing CSS more every day. Just now learning @forward and @use

[@DaveGrayTeachesCode]

Keep it up! One of my goals is to continue improving my CSS and Sass skills this year. 💯

[@FitnessChaos]

Good video man and great explanation.

[@DaveGrayTeachesCode]

Thank you! 🙏💯

[@mobalic8673]

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.

[@DaveGrayTeachesCode]

Yes, that could help when they gain more support: caniuse.com/?search=dvh

[@tonystack3365]

Thank you so much for your help!

[@DaveGrayTeachesCode]

You're welcome! 🚀

[@gulinatayier9049]

Great vide! Thank you!

[@DaveGrayTeachesCode]

Glad it helped! 💯

[@jasserlabiadh7012]

thank you that was super helpful

[@DaveGrayTeachesCode]

Glad to hear it! 💯

[@sagarchawla4926]

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

[@DaveGrayTeachesCode]

Glad to hear that!

[@hardwired89]

Thank you dave 👍

[@DaveGrayTeachesCode]

You're welcome 🙂

[@asimwilliams2116]

This is so helpful!

[@DaveGrayTeachesCode]

Glad to hear it! 💯

[@Max-tq1ig]

This is just perfect. Thank you (:

[@DaveGrayTeachesCode]

You're welcome! 🙏

[@anshhmehta]

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.

[@DaveGrayTeachesCode]

Welcome and good job!

[@sigmiami]

great explanation dave

[@DaveGrayTeachesCode]

Glad it was helpful!

[@pnk9901]

You are the best! Thank You!

[@DaveGrayTeachesCode]

Thank you for the kind words 🙏🙂

[@wgooglie8854]

I am beginner and this is what i exactly needed. Thank you so much for this wonderful tutorial. plz upload these kind of more tutorials which only covers basis of html css and javascript.

[@DaveGrayTeachesCode]

Thank you! 🙏 I am currently outlining a full HTML & CSS course for beginners, and I have a full Javascript for Beginners tutorial here: kzbin.info/www/bejne/e5eknWyYrN-JkM0 💯🚀

[@wgooglie8854]

@@DaveGrayTeachesCode yeah i am watching this right know❤️

[@waqaramanat9404]

OMG.... bundle of thanks

[@GbpsGbps-vn3jy]

Hi, Dave, have a question about the images. Do you know how to set img css properties so it is properly sized to 50% of body width (or it's container) when using flexbox, or to be naturally at auto when elements at left side are bigger? Thanks in advance

[@DaveGrayTeachesCode]

Great questions, and there is a lot to know about images and sizing. I could create several tutorials or articles about this, but I haven't yet. Kevin Powell has a great channel all about CSS and has created some videos on image sizing. Definitely look his channel up!

[@dudekiller82]

That helped thank you

[@jhojanrivera7433]

Definitivamente me resolvió muchas dudas. Antes siempre lo resolvía tocando muchas cosas hasta qie saliera bien. Ahora, puedo hacerlo desde la teoría.

[@DaveGrayTeachesCode]

Estoy contento de haber ayudado. (courtesy of Google translate) = I am glad I helped!

[@syednoohu8692]

It saves my one year! thanks

[@DaveGrayTeachesCode]

Great to hear! 💯

[@rynakiqbal]

Amazing, thank you

[@DaveGrayTeachesCode]

Welcome!

[@lionelfaith3646]

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

[@DaveGrayTeachesCode]

Thanks! 😃

[@makeurownstory6206]

my life changed by this channel ......how to view html and css ... love u gray

[@DaveGrayTeachesCode]

Thank you for the kind words! 🙏💯

[@arumlarosati]

Thanks

[@imade6707]

thank u Dave!

[@DaveGrayTeachesCode]

Welcome!

[@Sonu_Kr95]

Great video thanks alot

[@DaveGrayTeachesCode]

Glad it was helpful! 💯

[@SanthoshKumar44]

Thank you so much !!!

[@DaveGrayTeachesCode]

You're welcome!

[@manuelvaal1257]

Awesome 💡

[@maksymdudyk1718]

Thank you so much, Dave. I am a back-end developer looking to quickly master CSS. And I think of no better place to do this, but with your vlog. Would you please advise me on the learning roadmap: what tuts of yours to watch first. Sincerely.

[@DaveGrayTeachesCode]

Just today I started a CSS playlist that I will continue to add tutorials to: kzbin.info/www/bejne/oWSXhmd_i65_ick Thank you for asking, watching, and subscribing :)

[@maksymdudyk1718]

@@DaveGrayTeachesCode I appreciate your quick response!

[@DaveGrayTeachesCode]

You're welcome 👍

[@user-nw8we9ul5p]

I'm also learning CSS, thanks Dave.

[@Michelle1992w]

I’m a beginner at web development and I coded a site for my husband’s business. I had sizing issues and thanks to this video now I know why. If I would of known this I wouldn’t of paid someone to fix my page. They made it seem like my code was a huge mess and made me feel so bad since this is a career I really want to persuade. Now I now the issue could be simply done by my body and HTML set size.

[@DaveGrayTeachesCode]

Glad I could help. You can do this! Best wishes for your career! 💯

[@im_the_raymond]

you are great man!

[@DaveGrayTeachesCode]

Happy to help! Thank you 🙏

[@teosurch]

Thank you!

[@DaveGrayTeachesCode]

You're welcome 🙏

[@krishnag6199]

Superb tutorial...

[@DaveGrayTeachesCode]

Thank you 🙏

[@giulia6930]

thank you very much !!!

[@DaveGrayTeachesCode]

You're welcome, Julie! 🙏

[@abdihakimguliye8207]

Thanks i learnt alot

[@DaveGrayTeachesCode]

You're welcome!

[@andreip.8321]

hehe, I didn't know about the difference between the width: 100% and 100vw. That's awesome. Indeed, as others said, one of the best videos on CSS width and height.

[@DaveGrayTeachesCode]

Glad to help! 🚀

[@christopherpink842]

THANK YOU , I literally spent over 12 hrs trying to build a webpage and the layout was not fitting on different screen sizes, using mediaqueries than on another screen size would change , I was about to just give up until i found this video

[@DaveGrayTeachesCode]

Glad I could help! 🚀

[@EmelieBoss]

Omg thank youuuuu!!!

[@DaveGrayTeachesCode]

Welcome!!

[@_radix_]

Thank you.

[@DaveGrayTeachesCode]

You're welcome!

[@faizanahmedsiddiqui5703]

I am working on a webpage but I got stuck on defining the max and min width. Basically I would want my page to be centered in when zooming out the webpages like what most webpages does. I am talking about CONTROL - (minus), zooming out to 20 or 30%, what is the solution of it??

[@noodian3268]

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

[@dudsfrenchieclothing]

what is the name program used when you are doing this

[@gustavomonte6672]

Beautifully explained. +1

[@DaveGrayTeachesCode]

Thank you, Gustavo. 🙏

[@Recoss53]

Hello, so i went over this and did it all exactly as your example which makes perfect sense. However, the HTML element still appears to be taller than the body element despite not having any height setting set for it. I know this because I gave it a background color to identify it. When I inspect the elements, body is 1000px and html is 1040. Do you have any solutions for this?